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

This article focuses on "how to use css3 to make buttons and add dynamic effects", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to make buttons with css3 and add dynamic effects.

How does css achieve the button button effect?

HTML structure:

First define a body, use the button button, add the text value set to "start the game" to facilitate the setting of class to id selector.

Effect code

The effect is out, you can see the button effect, but without adding dynamic decoration to it, add dynamic effects to it by using css to see how to do it.

Css edit code:

1. Between style, initialize the search style, add the setting height and width, and then use the setting background background to set the no-repeat background image will not be repeated.

.search {width: 185px; height: 70px; background: url (images/btn_08.jpg) no-repeat center;}

Code effect

2. Next, add the fillet property to the css3 button to set four values for each border, and finally set the center alignment to use float: left.

Border-radius: 8pxscape: copyright Webkit: border: radius: 8px;: 8px;;: 8px;;: 8px;;: 8px;;: 8px;:: float: 8px;:: float: 8px;:

Code effect

The four-point edge fillet effect has come out.

3, add font size, text alignment and font weight to search style, and set the style, color and shape of all borders of border elements.

Font-size: 30pxtertextMuialign: center;font-weight: bold;border: none;color: # fff;cursor: pointer;line-height: 70pxThirty family: Microsoft Yahei

4. Between style, initialize the style of btn, add the setting height and width, and then use to set the background background.

.btn {width: 383px; height: 70px lineline ownership height: 0; border: 2px solid # a2f3ff; background: # f3682d;}

Code effect

5. Add font size, text alignment and font weight to the btn style, and set the style, color and shape of all borders of the border element.

Border-radius: 37pxTen: 3px 2px # d4481bAfter: Font family: 3px 2px # d4481b: Font: Microsoft

Code effect

6. Bind animation to search

# search {animation: breathe 1.1s infinite

7. Create an animation using the @ keyframes rule.

@ keyframes breathe {0% {transform: scale (.99);} 50% {transform: scale (1.03);} 100% {transform: scale (.99);}}

Code effect

Ok, edit the code complete.

Complete code

Button button .search {width: 185px; height: 70px; background: url (images/btn_08.jpg) no-repeat center; border-radius: 8px;-webkit-border-radius: 8px;-o-border-radius: 8px -moz-border-radius: 8px; float: left; font-size: 30px; text-align: center; font-weight: bold; border: none; color: # fff; cursor: pointer Line-height: 70px; font-family: Microsoft Acer;} .btn {width: 383px; height: 70px; height: 70px; border: 2px solid # a2f3ff; background: # f3682d Margin: 22px 0017px; border-radius: 37px;-webkit-border-radius: 37px;-o-border-radius: 37px;-moz-border-radius: 37px; text-shadow: 3px 2px # d4481b;-webkit-text-shadow: 3px 2px # d4481b -o-text-shadow: 3px 2px # d4481b;-moz-text-shadow: 3px 2px # d4481b; font-family: Microsoft Accord;} # search {animation: breathe 1.1s infinite } @ keyframes breathe {0% {transform: scale (.99);} 50% {transform: scale (1.03);} 100% {transform: scale (.99) }} at this point, I believe you have a deeper understanding of "how to use css3 to make buttons and add dynamic effects". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.