3D buttons implemented by pure css3 and css33d buttons

3D buttons implemented by pure css3 and css33d buttons

Many buttons implemented by pure css3 have been introduced earlier. Today, we will bring you a 3D button for pure css3 implementation. Five Colors of 3D buttons are provided in the instance. As follows:

Download Online Preview source code

Implementation code.

Html code:

 
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, reprint please indicate the original address: http://www.w2bc.com/Article/7636

What do you know about soft ship training?
HTML5/CSS3 is the button special effects that can be used to write web pages. It is very practical. If you don't quite understand it, You can first understand the relationship between htmlhe and css. This is the programming knowledge.

How to Use CSS3 to create 3D effects and text to implement style Solutions
Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color.
Stacked multi-layer CSS projection
Although we do not need to stack multi-layer projection, it will have a better 3D effect through stack multi-layer projection.
Start creating 3D text
You may choose a color that is deeper than the text to use as the projection color, so in this example, I use white text and a little deeper gray as the projection color, in this example, I render the 3D effect of H2 text. The css code is as follows:
The copy code is as follows: h2 {text-shadow:
1px 1px 0 # CCC,
2px 2px 0 # CCC,/* end of 2 level deep gray shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here. However, let's further implement the zoomed-in effect of text sliding over the mouse, and use the transision attribute of css to implement smooth fade-in and fade-out effects.
First, use the transform attribute to zoom in the font.
Copy the Code as follows: h2: hover {/* CSS3 Transform Effect */
-Webkit-transform: scale (1.2);/* Safari & Chrome */
-Moz-transform: scale (1.2);/* Firefox */
-O-transform: scale (1.2);/* Opera */}: Use the transition attribute to implement fade-in and fade-out.
Copy the Code as follows: h2 {/* CSS3 Transition Effect */
-Webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */
-Moz-transition: all 0.12 s outgoing-out;/* Firefox */
-O-transition: all 0.12 s bytes-out;/* Opera */} Here, we use CSS3 to implement the 3D effect text, in addition, moving the mouse over enables font to zoom in and fade in and out, which is implemented with pure CSS.