How to Create a 3D Color Edge button for pure CSS3

Today, we will share a 3D button with pure CSS3, which features a colored edge, which makes the entire button more colorful and less boring. This article not only allows you to see the demo effect, but also shares the production tutorial. First, let's take a look:

.

Next, let's share the tutorial and source code. The source code of the button mainly consists of two parts: HTML and CSS. Let's take a look at the HTML code:

          Teach me to fly like Superman and woo Lois Lane      Superpowers  exp: Apr 18, 1938      80                        Teach me to play ukulele like Israel Kamakawiwo'ole      Music  exp: May 20, 1959      35                        Teach me to be a javascript ninja like Mr Doob      Web Development  exp: Apr 1, 2010      60                        Teach me to cook like The Hairy Bikers      Cooking  exp: Jul 07, 2013      100            

As you can see, the structure of the HTML code is also very clear, there is no HTML5 element, a button and several div elements.

Here we have defined four buttons. Just like above, each button has edges of different colors. Specifically, we will implement 3D effects and edge effects in CSS code.

The following is the CSS code. First, all the buttons are rendered in a uniform style:

{:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;}{:;:;:;}

As you can see, the basic appearance of all buttons comes out, including 3D effects.

Then, define the edge color of each button and the style of sliding over the mouse and pressing the button:

{:;:;:;}{:;:;:;}{:;:;:;}{:;:;:;}{:;:;:;}{:;:;:;}

The main code is this, and all the source code is also shared,>