Pure CSS3 color Edge 3D Stereo button Making tutorial

Today we share a 3D button that uses pure CSS3, a feature of this button is a colored edge, which makes the whole button look more colorful, not so boring. This article not only lets you see the demonstration effect, and we also share the production tutorial, first to see:

We can also see the demo demo of these buttons here.

Next, to share the production tutorial and source code, the source of the button is mainly composed of HTML and CSS two parts of the code, first look at the HTML code:

<button class= "Blue" > <div class= "wrapper" > 
As you can see, the structure of the HTML code is also very clear, with no HTML5 elements, a button and a few div elements.
Here we define 4 buttons, like on the same, each button has a different color edge, specifically we will implement in the CSS code 3D effect and edge effect.
Next is the CSS code, which first renders all the buttons in a uniform style:
button {Display:block;  Float:left;  margin:0 0 1rem 0;  padding:0;  border:0;  Height:5rem;  Width:25rem;  Border-radius:0.4rem;  position:relative;  Background:transparent; Outline:none;}  button. wrapper {display:block;  Float:left;  Background: #fff;  border:0;  Height:5rem;  Width:25rem;  Border-radius:0.4rem;  position:relative;  Box-shadow:inset 0-0.3rem 0 0 rgba (0, 0, 0, 0.2), 0 0.1rem 0 0 rgba (0, 0, 0, 0.2);  Transition:height 0.08s, margin 0.08s, Box-shadow 0.08s, background 0.08s;  Background:-moz-linear-gradient (0deg, #4d4d4d 0, #4d4d4d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #4d4d4d 0, #4d4d4d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #4d4d4d 0, #4d4d4d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} button. wrapper:hover {background:-moz-linear-gradient (0deg, #333333 0, #333333 2, #ffffff 2, #ffffff 92%, #f5f5f5 9 2%, #f5F5f5 100%);  Background:-webkit-linear-gradient (0deg, #333333 0, #333333 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #333333 0, #333333 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);}  button. wrapper:active {margin-top:0.3rem;  Height:4.7rem; Box-shadow:none;}
As you can see, the basic look of all the buttons comes out, including the 3D effect.
Then you define the edge color for each button, as well as the mouse-over and button-down styles:
Button.blue. Wrapper {background:-moz-linear-gradient (0deg, #7db2e8 0, #7db2e8 2, #ffffff 2, #ffffff 92%, #f5f5f5 92  %, #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #7db2e8 0, #7db2e8 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #7db2e8 0, #7db2e8 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} Button.blue. wrapper:hover {background:-moz-linear-gradient (0deg, #5299e0 0, #5299e0 2, #ffffff 2, #ffffff 92%, #f5f  5f5 92%, #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #5299e0 0, #5299e0 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #5299e0 0, #5299e0 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} Button.green. Wrapper {background:-moz-linear-gradient (0deg, #c4e87d 0, #c4e87d 2, #ffffff 2, #ffffff 92%, #f5f5f5 9  2%, #f5f5f5 100%); Background:-webkit-linear-gradient (0deg, #c4e87d 0, #c4e87d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #c4e87d 0, #c4e87d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} Button.green. wrapper:hover {background:-moz-linear-gradient (0deg, #b1e052 0, #b1e052 2, #ffffff 2, #ffffff 92%, #f5  F5f5 92%, #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #b1e052 0, #b1e052 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #b1e052 0, #b1e052 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} Button.red. Wrapper {background:-moz-linear-gradient (0deg, #e87d7d 0, #e87d7d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%  , #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #e87d7d 0, #e87d7d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #e87d7d 0, #e87d7d 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);} Button.red. wrapper:hover {background:-moz-linear-gradient (0deg, #e05252 0, #e05252 2, #ffffff 2, #ffffff 92%, #f5f5F5 92%, #f5f5f5 100%);  Background:-webkit-linear-gradient (0deg, #e05252 0, #e05252 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%); Background:linear-gradient (90deg, #e05252 0, #e05252 2, #ffffff 2, #ffffff 92%, #f5f5f5 92%, #f5f5f5 100%);}
The main code is these, and all the source codes share the,>>
Pure CSS3 color Edge 3D Stereo button Making tutorial