CSS3 Web Page Production Example: CSS3 Create creative Style button

Article Introduction: a creative Style button written with CSS3. This set of button style when the mouse passes, click on a number of subtle transformations, including some simple css3 transition effects, animation effects and JavaScript auxiliary control effect.

Today we share some creative style buttons written with CSS3. This set of button style when the mouse passes, click on a number of subtle transformations, including some simple css3 transition effects, animation effects and JavaScript auxiliary control effect. In this set of creative style buttons, many places are cleverly used: before and: After the pseudo elements.

View Preview Download attachment

Basic HTML structure and style examples

Here's an example of a specific effect and implementation method. Creating a button is very simple and requires only one <button></button> tag.

<button class= "btn btn-6 btn-6d" >Button</button>

As you can see from the code above, several styles are added (btn btn-6 btn-6d), where the "btn" is a common style and the other two are specific styles for a particular button. Here is the use of a CSS writing tips, when we write CSS style, we can extract the public parts, and then call where needed. The CSS code written in this way will be easier to maintain and brief, as well as ensure a consistent style in the page.

Here is a specific style for one of the examples (Button 6d):

/* Button 6d * *

. btn-6d {border:2px dashed #226fbe;}

  . btn-6d:hover {background:transparent; color: #226fbe;}

This part of the style determines the difference between the specific buttons.

View Preview Download attachment

Well, the specific creative style of each button, you can look at the demo page, hope can bring you help and inspiration.