web前端入門到實(shí)戰(zhàn)：CSS實(shí)現(xiàn)8種炫酷按鈕

時(shí)間：2023-07-24 14:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 14:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web前端入門到實(shí)戰(zhàn)：CSS實(shí)現(xiàn)8種炫酷按鈕：今天給大家分享8種炫酷按鈕的CSS實(shí)現(xiàn)。

1. 3D按鈕1

現(xiàn)在的主流是扁平化的設(shè)計(jì)，擬物化的設(shè)計(jì)比較少見了，所以我們僅從技術(shù)角度去分析如何實(shí)現(xiàn)這個(gè)3D按鈕

該按鈕的立體效果主要由按鈕多出的左、下兩個(gè)側(cè)面襯托出來(lái)，我們可以使用box-shadow模擬出這兩個(gè)側(cè)面：

HTML：

<button class="button-3d-1">3D Button 1</button>CSS:

.button-3d-1{ position: relative; background: orangered; border: none; color: white; padding: 15px 24px; font-size: 1.4rem; outline: none; box-shadow: -6px 6px 0 hsl(16, 100%, 30%);}效果：







加了box-shadow之后整體形狀有點(diǎn)像了，但是立方體的左上和右下確缺了一塊。通過(guò)觀察我們發(fā)現(xiàn)，缺的這兩塊是三角形的，所以如果我們能構(gòu)造兩個(gè)三角形補(bǔ)到這兩個(gè)角上就行了。用CSS畫三角形對(duì)大家來(lái)說(shuō)應(yīng)該是基本操作了，如果還有同學(xué)不知道，下面的動(dòng)畫很好的解釋了原理







我們使用::before和::after偽元素來(lái)分別繪制左上、右下的兩個(gè)三角形，并通過(guò)絕對(duì)定位將它們固定到兩個(gè)角落：

CSS：

.button-3d-1::before { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-right: 6px solid hsl(16, 100%, 30%); border-left-width: 0px;}.button-3d-1::after { content: ""; display: block; width: 0; height: 0; position: absolute; bottom: -6px; right: 0; border: 6px solid transparent; border-top: 6px solid hsl(16, 100%, 30%); border-bottom-width: 0px;}接下來(lái)，我們需要實(shí)現(xiàn)點(diǎn)擊時(shí)按鈕被按下的效果，思路是點(diǎn)擊時(shí)將按鈕正面向左下角移動(dòng)，同時(shí)減少box-shadow的偏移量以達(dá)到按鈕底部固定不動(dòng)的效果：

CSS：

.button-3d-1:active { background: hsl(16, 100%, 40%); top: 3px; left: -3px; box-shadow: -3px 3px 0 hsl(16, 100%, 30%);}最后，我們需要重新計(jì)算左上、右下兩個(gè)三角形的尺寸和位置，以適應(yīng)按下后上下缺口的變小：

CSS：

.button-3d-1:active::before { border: 3px solid transparent; border-right: 3px solid hsl(16, 100%, 30%); border-left-width: 0px; left: -3px;}.button-3d-1:active::after { border: 3px solid transparent; border-top: 3px solid hsl(16, 100%, 30%); border-bottom-width: 0px; bottom: -3px;}

2. 3D按鈕2

對(duì)于這種圓柱形的按鈕，思路和上面矩形3D的按鈕類似，也是通過(guò)box-shadow構(gòu)造側(cè)面呈現(xiàn)立體感。為了使效果更加真實(shí)，側(cè)面的顏色呈現(xiàn)漸變效果，越往下顏色越深，因此我們可以通過(guò)疊加多層box-shadow來(lái)實(shí)現(xiàn)：

HTML：

<button class="button-3d-2">Circle!</button>CSS：

.button-3d-2{ position: relative; background: #ecd300; background: radial-gradient(hsl(54, 100%, 50%), hsl(54, 100%, 40%)); font-size: 1.4rem; text-shadow: 0 -1px 0 #c3af07; color: white; border: 1px solid hsl(54, 100%, 20%); border-radius: 100%; height: 120px; width: 120px; z-index: 4; outline: none; box-shadow: inset 0 1px 0 hsl(54, 100%, 50%), 0 2px 0 hsl(54, 100%, 20%), 0 3px 0 hsl(54, 100%, 18%), 0 4px 0 hsl(54, 100%, 16%), 0 5px 0 hsl(54, 100%, 14%), 0 6px 0 hsl(54, 100%, 12%), 0 7px 0 hsl(54, 100%, 10%), 0 8px 0 hsl(54, 100%, 8%), 0 9px 0 hsl(54, 100%, 6%);}當(dāng)點(diǎn)擊按鈕的時(shí)候，通過(guò)下移按鈕和減少box-shadow的層數(shù)來(lái)實(shí)現(xiàn)按鈕被按下的效果：

CSS：

.button-3d-2:active{ ... top: 2px; box-shadow: inset 0 1px 0 hsl(54, 100%, 50%), 0 2px 0 hsl(54, 100%, 16%), 0 3px 0 hsl(54, 100%, 14%), 0 4px 0 hsl(54, 100%, 12%), 0 5px 0 hsl(54, 100%, 10%), 0 6px 0 hsl(54, 100%, 8%), 0 7px 0 hsl(54, 100%, 6%);}

3. 漸變按鈕1

提到漸變色大家一般都會(huì)想到background-image屬性可以設(shè)置為linear-gradient以呈現(xiàn)漸變色的背景，事實(shí)上linear-gradient的類型屬于<image>的一種，所以凡是可以使用圖片的屬性都可以用linear-gradient代替，包括border-image。實(shí)現(xiàn)這個(gè)按鈕的關(guān)鍵在于實(shí)現(xiàn)一個(gè)漸變色和邊框，而且當(dāng)鼠標(biāo)懸浮的時(shí)候邊框和背景融為一體。

首先，我們實(shí)現(xiàn)漸變色的邊框。

HTML：

<button class="gradient-button-1">Gradient Button 1</button>CSS：

.gradient-button-1{ position: relative; z-index: 1; display: inline-block; padding: 20px 40px; font-size: 1.4rem; box-sizing: border-box; background-color: #e7eef1; color: orangered; border:solid 10px transparent; border-image: linear-gradient(to top right, orangered, yellow);}效果：







很奇怪，只有四個(gè)頂點(diǎn)有圖像。這是因?yàn)?code>border-image-slice默認(rèn)為100%，所以導(dǎo)致四條邊線上并沒(méi)有分配背景圖像。border-image-slice的用法參考 MDN，簡(jiǎn)而言之就是用四條（上下、左右各兩條平行線，想象一下九宮格火鍋。。）將圖片切割成9塊，在border的對(duì)應(yīng)區(qū)域顯示對(duì)應(yīng)的圖像切片，而border-image-slice的值就是那四條線的偏移量。這下大家應(yīng)該能理解偏移量為100%的時(shí)候只有四個(gè)頂點(diǎn)上才有圖片了吧。

所以我們需要調(diào)整border-image-slice的值，鑒于border-image-source為linear-gradient，我們需要將border-image-slice的值設(shè)置為1（表示四條線的偏移量都為1px）才能顯示連續(xù)的漸變色背景：

CSS：

.gradient-button-1{ ... border-image-slice: 1;}最后，我們只需要在鼠標(biāo)懸浮的時(shí)候用漸變色填充按鈕內(nèi)部就行了，此處有兩種實(shí)現(xiàn)，用 background-image 或者 將border-image-slice 設(shè)置為 fill （表示填充border中間的區(qū)域）：

CSS：

.gradient-button-1:hover{ color: white; background-image: linear-gradient(to top right, orangered, yellow); /* 或者 */ border-image-slice: 1 fill;}

4. 漸變按鈕2

與上一種按鈕類似，只不過(guò)顏色是逐漸變透明，實(shí)現(xiàn)也類似：

HTML：

<button class="gradient-button-2">Gradient Button 2</button>CSS：

.gradient-button-2{ ... border:solid 4px transparent; border-image: linear-gradient(to right, orangered, transparent); border-image-slice: 1;}.gradient-button-2:hover{ color: white; background-image: linear-gradient(to right, orangered, transparent); border-right: none;}

注意點(diǎn)：當(dāng)hover的時(shí)候需要設(shè)置 border-right: none，否則右側(cè)邊框無(wú)法呈現(xiàn)消失的狀態(tài)。

5. 動(dòng)畫按鈕1

給按鈕加上一個(gè)動(dòng)態(tài)背景的思路是：先找一個(gè)可以repeat的背景圖，然后使用keyframe自定義一段動(dòng)畫，當(dāng)鼠標(biāo)懸浮在按鈕上的時(shí)候運(yùn)行該動(dòng)畫：

HTML：

<button class="animated-button-1">Animated Button 1</button>CSS：

.animated-button-1{ position: relative; display: inline-block; padding: 20px 40px; font-size: 1.4rem; background-color: #00b3b4; background-image: url("wave.png"); background-size: 46px 26px; border: 1px solid #555; color: white; transition: all ease 0.3s;}.animated-button-1:hover{ animation: waving 2s linear infinite;}@keyframes waving{ from{ background-position: 0 0; } to{ background-position: 46px 0; }}

注意點(diǎn)：background-position 水平方向的值需要等于背景圖片的寬度或其整數(shù)倍，這樣動(dòng)畫循環(huán)播放的時(shí)候首尾才能平穩(wěn)過(guò)渡。

6. 動(dòng)畫按鈕2

該按鈕的實(shí)現(xiàn)思路是：用 ::after 偽元素創(chuàng)建右側(cè)的箭頭，使用絕對(duì)定位固定在按鈕右側(cè)，靜止?fàn)顟B(tài)下通過(guò)設(shè)置opacity: 0隱藏，當(dāng)鼠標(biāo)懸浮時(shí)，增大按鈕的padding-right，同時(shí)增加箭頭的不透明度，并將其位置往左移動(dòng)：

HTML：

<button class="animated-button-2">Animated Button 2</button>CSS：

.animated-button-2{ position: relative; padding: 20px 40px; font-size: 1.4rem; background-color: #00b3b4; background-size: 46px 26px; border: 1px solid #555; color: white; transition: all ease 0.3s;}.animated-button-2::after{ position: absolute; top: 50%; right: 0.6em; transform: translateY(-50%); content: "?"; font-size: 1.2em; transition: all ease 0.3s; opacity: 0;}.animated-button-2:hover{ padding: 20px 60px 20px 20px;}.animated-button-2:hover::after{ right: 1.2em; opacity: 1;}

7. 開關(guān)按鈕1

這算是一個(gè)挺常見的開關(guān)按鈕，它的實(shí)現(xiàn)思路是：

1. 通過(guò)一個(gè)checkbox記錄開關(guān)的狀態(tài)，并隱藏該checkbox;
2. 使用一個(gè) <label> 作為整個(gè)按鈕容器，并通過(guò) for 屬性與checkbox關(guān)聯(lián)，這樣點(diǎn)擊按鈕的任何地方都能改變checkbox的狀態(tài)；
3. 使用一個(gè) <span> 作為按鈕可視的部分，并作為 checkbox 的相鄰元素，這樣通過(guò) checkbox的偽類選擇器 :checked 和相鄰選擇器 + 選中 <span>并顯示不同狀態(tài)下的內(nèi)容。

HTML：

<label for="toggle1" class="toggle1"> <input type="checkbox" id="toggle1" class="toggle1-input"> <span class="toggle1-button"></span></label>CSS：

.toggle1{ vertical-align: top; width: 80px; display: block; margin: 100px auto;}.toggle1-input{ display: none;}.toggle1-button{ position: relative; display: inline-block; font-size: 1rem; line-height: 20px; text-transform: uppercase; background-color: #f2395a; border: 1px solid #f2395a; color: white; width: 100%; height: 30px; transition: all 0.3s ease; cursor: pointer;}.toggle1-button::before{ position: absolute; top: 5px; left: 38px; content: "off"; display: inline-block; height: 20px; padding: 0 3px; background: white; color: #f2395a; transition: all 0.3s ease;}.toggle1-input:checked + .toggle1-button{ background: #00b3b4; border-color: #00b3b4;}.toggle1-input:checked + .toggle1-button::before{ left: 5px; content: 'on'; color: #00b3b4;}

注意點(diǎn)：<label> 的 for 屬性的作用；:checked 偽類的使用；+ 相鄰選擇器的使用。

8. 開關(guān)按鈕2

與開關(guān)按鈕1類似，動(dòng)畫效果上更簡(jiǎn)單，只要切換顏色就行了：

HTML：

<label for="toggle2" class="toggle2"> <input type="checkbox" id="toggle2" class="toggle2-input"> <span class="toggle2-button">Click to activate</span></label>CSS：

.toggle2{ font-size: 0.8rem; display: inline-block; vertical-align: top; margin: 0 15px 0 0;}.toggle2-input{ display: none;}.toggle2-button{ position: relative; display: inline-block; line-height: 20px; text-transform: uppercase; background: white; color: #aaa; border: 1px solid #ccc; padding: 5px 10px 5px 30px; transition: all 0.3s ease; cursor: pointer;}.toggle2-button::before{ position: absolute; top: 10px; left: 10px; display: inline-block; width: 10px; height: 10px; background: #ccc; content: ""; transition: all 0.3s ease; border-radius: 50%;}.toggle2-input:checked + .toggle2-button{ background: #00b3b4; border-color: #00b3b4; color: white;}.toggle2-input:checked + .toggle2-button::before{ background: white;}更多大型互聯(lián)網(wǎng)web前端實(shí)戰(zhàn)操作，在線解析，學(xué)習(xí)指導(dǎo)，學(xué)習(xí)資源，點(diǎn)：【W(wǎng)EB前端資源】