時(shí)間：2023-07-05 17:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-05 17:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
如何使用HTML5+css3制作出12種常用的按鈕開關(guān)樣式（附完整代碼）：現(xiàn)如今前端網(wǎng)頁(yè)的開發(fā)越來(lái)越注重設(shè)計(jì)感，這些設(shè)計(jì)感更體現(xiàn)在細(xì)節(jié)處，今天向大家具體介紹一下各式各樣的開關(guān)按鈕是如何使用HTML5+css3制作出來(lái)的，希望可以幫到大家。
在線咨詢
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>各式各樣的按鈕</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 600px; height: 400px; margin: 0 auto; /*background: pink;*/ padding: 30px 50px; } /*div按鈕*/ .button5{ width: 100px; height: 30px; float: left; /*position: absolute;*/ text-align: center; padding-top: 10px; margin:0px 10px ; background: greenyellow; border: 1px solid plum; cursor: pointer; border-radius: 50%; } /*鏈接按鈕*/ .button2{ background: gold; border: 1px solid greenyellow; text-decoration: none; display: inline-block; padding: 10px 22px; border-radius: 20px; /*cursor: pointer;靠近按鈕的一只手*/ } /*按鈕*/ .button3{ background: pink; border: 1px solid blueviolet; padding: 10px 28px; cursor: pointer; color: yellow; border-radius: 40%; } /*輸入框按鈕*/ .button4{ background: cornflowerblue; border: 3px solid yellow; padding: 10px 20px; border-radius: 20%; outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/ } /*懸停變色按鈕*/ .button6{ background: plum; color: greenyellow; border: 1px solid dodgerblue; transition-duration: 1s;/*過(guò)渡時(shí)間*/ border-radius: 12px; padding: 13px 18px; margin-top: 20px; outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/ } .button6:hover{ background: yellow; color: magenta; transition-duration: 1s; } /*陰影按鈕*/ .button7{ /*display: inline-block;*/ border: none; background: lime; padding: 13px 18px; margin-top: 20px; /*outline-style: none;!*去除點(diǎn)擊時(shí)外部框線*!*/ /*-webkit-transition-duration: 0.6s;*/ transition-duration: 0.6s; /*設(shè)置按鈕陰影*/ box-shadow: 0 8px 16px 0 rgba(0,255,0,0.2),0 6px 20px 0 rgba(0,0,255,0.1); } /*懸停出現(xiàn)陰影按鈕*/ .button8{ border: none; background: dodgerblue; padding: 13px 18px; margin-top: 20px; transition-duration: 0.6s; } .button8:hover{ box-shadow: 0 12px 16px 0 rgba(0,255,0,0.24),0 17px 50px 0 rgba(0,0,255,0.19); } /*禁用按鈕*/ .button9{ border: none; background: green; padding: 13px 18px; margin-top: 20px; opacity: 0.6;/*設(shè)置按鈕的透明度*/ cursor: not-allowed;/*設(shè)置按鈕為禁用狀態(tài)*/ } /*箭頭標(biāo)記按鈕*/ .button10{ display: inline-block; border: none; background: red; color: white; padding: 20px; text-align: center; border-radius: 4px; width: 180px; font-size: 16px;/*可以通過(guò)字體控制button大小*/ transition: all 0.5s; margin: 5px; cursor: pointer; } .button10 span{ cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button10 span:after{ content: '?'; color: white; position: absolute; opacity: 0;/*先設(shè)置透明度為0，即不可見*/ right:-20px;/*新增箭頭出來(lái)的方向*/ transition: 0.5s; } .button10:hover span{ padding-right: 15px;/*新增箭頭與前面文字的距離*/ } .button10:hover span:after{ opacity: 1;/*設(shè)置透明度為1，即可見狀態(tài)*/ right: 0; } /*點(diǎn)擊出現(xiàn)波紋效果按鈕*/ .button11{ position: relative;/*必須添上這一句，否則波紋布滿整個(gè)頁(yè)面*/ background: dodgerblue; border: none; color: white; width: 180px; font-size: 16px;/*可以通過(guò)字體控制button大小*/ padding: 20px; border-radius: 12px; transition-duration: 0.4s; overflow: hidden; outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/ } .button11:after{ content:""; background: aquamarine; opacity: 0; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; transition: all 0.5s; } .button11:active:after{ padding: 0; margin: 0; opacity: 1; transition: 0.1s; } /*點(diǎn)擊出現(xiàn)按壓效果*/ .button12{ outline-style: none;/*去除點(diǎn)擊時(shí)外部框線*/ padding: 20px; color: white; background: yellow; border: none; border-radius: 12px; box-shadow: 0px 9px 0px rgba(144,144,144,1),0px 9px 25px rgba(0,0,0,.7); } .button12:hover{ background: gold; } .button12:active{ background: gold; box-shadow: 0 5px #666; transform: translateY(4px); transition-duration: 0s;/*過(guò)渡效果持續(xù)時(shí)間*/ } </style></head><body><div> <div>5div按鈕</div> <p style="clear: both"><br></p> <button>1默認(rèn)按鈕</button> <a href="#">2鏈接按鈕</a> <button>3按鈕</button> <input type="button" value="4輸入框按鈕"> <button>6懸停變色按鈕</button> <button>7陰影按鈕</button> <button>8懸停出現(xiàn)陰影</button> <button>9禁用按鈕</button> <button style="vertical-align: middle"><span>10箭頭標(biāo)記按鈕</span></button> <button>11波紋click</button> <button>12按壓效果click</button></div></body></html>關(guān)鍵詞：樣式,完整,使用
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
