Example analysis of how CSS makes button buttons change color

First, let's take a look at the final:

This is our best goal. If you're interested, well, then keep looking.

First, this button is useful to css3.0 's new style properties. If your browser doesn't see the style of corner arcs, it means that your browser version doesn't support css3.0 's new style. Workaround, upgrade the browser to the latest. As far as I know XP, Windows Server2003 the highest support is IE8 (can see the effect), if you do not want to upgrade IE, then you can download the browser is not IE kernel, such as Firefox, Google, Opera and so on.

Okay, so much nonsense ahead, we should see how to make our beautiful buttons.

In fact, we use the pseudo-elements of CSS, hover.

First we have to put a button of type input on the page. Add the CSS style to the button.

The specific CSS code is as follows:

. mybtn {width:86px;    Text-align:center;    line-height:100%;    Padding-top:0.5em;    Padding-right:2em;    Padding-bottom:0.55em;    Padding-left:2em;    Font-family:arial,sans-serif;    font-size:14px;    Font-style:normal;    Font-variant:normal;    Font-weight:normal;    Text-decoration:none;    margin-top:0px;    margin-right:2px;    margin-bottom:0px;    margin-left:2px;    Vertical-align:text-bottom;    Display:inline-block;    Cursor:pointer;    Zoom:1;    Outline-width:medium;    Outline-color:invert;    Font-size-adjust:none;    Font-stretch:normal;    Border-top-left-radius:0.5em;    Border-top-right-radius:0.5em;    Border-bottom-left-radius:0.5em;    Border-bottom-right-radius:0.5em;    box-shadow:0px 1px 2px Rgba (0,0,0,0.2);    text-shadow:0px 1px 1px rgba (0,0,0,0.3);    Color: #fefee9;    Border-top-color: #da7c0c;    Border-right-color: #da7c0c;    Border-bottom-color: #da7c0c;    Border-left-color: #da7c0c;    border-top-width:1px;    border-right-width:1px; Border-bottom-width:1px;    border-left-width:1px;    Border-top-style:solid;    Border-right-style:solid;    Border-bottom-style:solid;    Border-left-style:solid;    Background-image:none;    Background-attachment:scroll;    Background-repeat:repeat;    background-position-x:0%;    background-position-y:0%;    Background-size:auto;    Background-origin:padding-box;    Background-clip:padding-box; Background-color: #f78d1d;}

The specific CSS style explanation or Baidu a bit, this can improve your CSS level. If you do not know the CSS skills, but want to use this effect, it is necessary to modify the width of the button, set to its own button to the appropriate widths. Another is the replacement of the background color.

After writing the CSS style and writing the button buttons of input, we should associate them, just add class to the button of input.

<input type= "button" class= "mybtn" value= "I am the button"/>

Now we have the last one, that is, using CSS's pseudo-element hover,

Write a mybtn hover style. The code is as follows:

. mybtn:hover {    background: #f47c20;}

Because we only need to change the color of the background when we move the mouse, we only need to modify an attribute in the hover style.