純css3實現的3D按鈕，css33d按鈕

純css3實現的3D按鈕，css33d按鈕

前面已經為大家介紹了好多純css3實現的按鈕。今天要再給大家帶來一款純css3實現的3D按鈕。在執行個體中給出了五種顏色的3D按鈕。如下：

線上預覽   源碼下載

實現的代碼。

html代碼：

 <h1>        <span class="font-effect-shadow-multiple" style="font-size: 50px; font-family: Luckiest Guy;">            CSS</span> <span class="font-effect-3d" style="font-size: 50px; font-family: Sonsie One;">                3D</span> <span class="font-effect-shadow-multiple" style="font-size: 50px; font-family: Luckiest Guy;">                    Buttons</span>    </h1>    <p>        <a href="#" class="s3-btn s3-btn1">s3-btn1</a>    </p>    <p>        <a href="#" class="s3-btn s3-btn2">s3-btn2</a>    </p>    <p>        <a href="#" class="s3-btn s3-btn3">s3-btn3</a>    </p>    <p>        <a href="#" class="s3-btn s3-btn4">s3-btn4</a>    </p>    <p>        <a href="#" class="s3-btn s3-btn5">s3-btn5</a>    </p>

css3代碼：

        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;        }

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/7636

軟艦實訓分享的大家可以看懂？

HTML5/CSS3 就是在寫網頁裡可以用到的按鈕特效，很實用的，如果看不太明白，可以先瞭解一下htmlhe和css的關係，這是編程的知識
 
怎利用CSS3製作3D效果文字具體實現樣式解答

複製代碼代碼如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}譯者註：X表示x軸上的位移，可為負值；Y表示y軸上的位移，可為負值；Blur表示投影的寬度，不能為負值；Color為投影的顏色。
堆疊多層CSS投影
雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果
開始建立3D文字
你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個例子中我就用白色的文字，用深一點的灰色作為投影顏色，這個例子中我將H2的文字渲染3D效果，css代碼如下：
複製代碼代碼如下:h2{text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到這裡你已經建立了基本的3D文字，然而，讓我們進一步來實現滑鼠滑過的文字放大效果，並用css的transision屬性實現圓滑的淡入淡出效果。
首先用transform屬性實現滑過字型放大
複製代碼代碼如下:h2:hover{/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera */}效果如下：然後利用transition屬性實現淡入淡出效果
複製代碼代碼如下:h2{/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera */}到此，我們就用CSS3實現了3D效果的文字，並且在滑鼠滑過是讓字型放大，且有淡入淡出的效果，這一切是用純CSS實現的哦。