3D button for pure CSS3

In front of you have introduced a lot of pure CSS3 implementation of the button. Today will bring you a pure CSS3 implementation of the 3D button. A 3D button with five colors is given in the instance. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <H1>        <spanclass= "Font-effect-shadow-multiple"style= "font-size:50px; font-family:luckiest guy;">CSS</span> <spanclass= "Font-effect-3d"style= "font-size:50px; font-family:sonsie one;">3D</span> <spanclass= "Font-effect-shadow-multiple"style= "font-size:50px; font-family:luckiest guy;">Buttons</span>    </H1>    <P>        <ahref="#"class= "S3-btn s3-btn1">S3-btn1</a>    </P>    <P>        <ahref="#"class= "S3-btn s3-btn2">S3-btn2</a>    </P>    <P>        <ahref="#"class= "S3-btn s3-btn3">S3-btn3</a>    </P>    <P>        <ahref="#"class= "S3-btn s3-btn4">S3-btn4</a>    </P>    <P>        <ahref="#"class= "S3-btn s3-btn5">S3-btn5</a>    </P>

CSS3 Code:

Body{font-family:' Open Sans ', Sans-serif;Background-image:URL (blurred-background-images-photos-0322125813.jpg);background-repeat:no-repeat;background-position:Center Center;background-size:cover;background-attachment:fixed; }H1{text-align:Center; }P{margin:1em;padding:1em;text-align:Center; }. S3-BTN1,. s3-btn2,. S3-btn3,. S3-btn4,. S3-btn5, A.s3-btn1, A.S3-BTN2, A.s3-btn3, A.s3-btn4, a.s3-btn5 {Outline:None;text-decoration:None!important;margin:0 Auto;padding:1em 3em;Border-radius:5px;-webkit-transition:All 100ms Linear;transition:All 100ms Linear;Touch-callout:None;-webkit-user-select:None;-moz-user-select:None;-ms-user-select:None;User-select:None;cursor:Pointer;position:relative;text-align:Center; }. S3-BTN1{Color:#ffffff;background:-webkit-linear-gradient (Top, #c03718 0, #e44a27 100%);background:linear-gradient (to bottom, #c03718 0, #e44a27 100%);Border:1px solid #a93115;Box-shadow:0px 4px 0px 0px #a93115, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn1:hover{background:-webkit-linear-gradient (Top, #c03718 0, #d73e1b 100%);background:linear-gradient (to bottom, #c03718 0, #d73e1b 100%); }. S3-btn1:hover:active{Border:None!important;Top:4px;Box-shadow:0px 2px 0px 0px #a93115, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-BTN2{Color:#ffffff;background:-webkit-linear-gradient (Top, #6fbdbf 0, #92cdcf 100%);background:linear-gradient (to bottom, #6fbdbf 0, #92cdcf 100%);Border:1px solid #5db5b8;Box-shadow:0px 4px 0px 0px #5db5b8, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn2:hover{background:-webkit-linear-gradient (Top, #6fbdbf 0, #80c5c7 100%);background:linear-gradient (to bottom, #6fbdbf 0, #80c5c7 100%); }. S3-btn2:hover:active{Border:None!important;Top:4px;Box-shadow:0px 2px 0px 0px #5db5b8, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn3{Color:#ffffff;background:-webkit-linear-gradient (Top, #a8e427 0, #baea54 100%);background:linear-gradient (to bottom, #a8e427 0, #baea54 100%);Border:1px solid #9bd71a;Box-shadow:0px 4px 0px 0px #9bd71a, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn3:hover{background:-webkit-linear-gradient (Top, #a8e427 0, #b1e73d 100%);background:linear-gradient (to bottom, #a8e427 0, #b1e73d 100%); }. S3-btn3:hover:active{Border:None!important;Top:4px;Box-shadow:0px 2px 0px 0px #9bd71a, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn4{Color:#ffffff;background:-webkit-linear-gradient (Top, #70df9e 0, #9ae8ba 100%);background:linear-gradient (to bottom, #70df9e 0, #9ae8ba 100%);Border:1px solid #5cda8f;Box-shadow:0px 4px 0px 0px #5cda8f, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn4:hover{background:-webkit-linear-gradient (Top, #70df9e 0, #85e3ac 100%);background:linear-gradient (to bottom, #70df9e 0, #85e3ac 100%); }. S3-btn4:hover:active{Border:None!important;Top:4px;Box-shadow:0px 2px 0px 0px #5cda8f, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn5{Color:#ffffff;background:-webkit-linear-gradient (Top, #161616 0, #2f2f2f 100%);background:linear-gradient (to bottom, #161616 0, #2f2f2f 100%);Border:1px solid #090909;Box-shadow:0px 4px 0px 0px #090909, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }. S3-btn5:hover{background:-webkit-linear-gradient (Top, #161616 0, #222222 100%);background:linear-gradient (to bottom, #161616 0, #222222 100%); }. S3-btn5:hover:active{Border:None!important;Top:4px;Box-shadow:0px 2px 0px 0px #090909, 0px 5px 12px 0px rgba (0, 0, 0, 0.6), inset 0px 0px 10px-5px #000000; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/7636

3D button for pure CSS3