Shulou(Shulou.com)06/02 Report--

This article mainly introduces how Dreamweaver uses CSS to make fillet buttons. It is very detailed and has a certain reference value. Friends who are interested must read it!

Effect picture:

1. Create a new html file, enter an a tag in body, and insert an empty link. [start the game], and then insert the code that introduces the embedded style into the title [].

2. Then we add a css style to the a tag, name it [btn-style], and define the width, height, font color, background color of the button, and remove the underscore. Be careful to add disply:block, otherwise defining the width and height of the button will not take effect. [width: 150pxposition height: 50pxposiColoranizationF8FF00X background: # FF0000;text-decoration:none;display: block;] and then introduce the btn-style style [class= "btn-style"] into the a tag. After saving the web page, press F12 to view it in the browser, and we find that the font is small and is not in the middle of the button.

3. We continue to add styles to define the font horizontal center, vertical center, font, font size for the button.

Line-height: 50pxt textMutual align: center;font-size: 20pxt Fontmuri family: "Microsoft Yahei"

Save the view effect of the web page, and you will have the basic appearance of the button.

4. Then we rounded the four corners of the button to make it look more like a button. [border-radius: 100px;]. Check the effect after saving, can you also put it?

5. We can also change the color when the mouse passes over the button, so that the button is more obvious. We can separately define a mouse over color for a tag, and change the font color from yellow to white after the mouse is passed over [a:hover {color:#fff;}]

6. In addition to defining the font color when the mouse passes over, the button background color can also be changed. [background: # B00000;].

7. In order to facilitate experienced friends to observe the effect, I specially copied an identical button, added an outer space between the two buttons, and saved the web page, where you can see that the mouse changed color when the mouse passed over the button below. isn't that good?

8. We can also directly click "split" in the middle of the top in DW to view the real-time effect. Isn't it easy?

These are all the contents of the article "how to use CSS to make rounded buttons in Dreamweaver". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.