全等比縮放按鈕
網(wǎng)頁(yè)中經(jīng)常會(huì)用到按鈕蜈亩，尤其是移動(dòng)端更為明顯懦窘，但是通常我們都是固定寫(xiě)死按鈕的寬、高稚配、背景畅涂、圓角之類(lèi)的，這么做雖然沒(méi)什么問(wèn)題道川，但是如果后期想把這個(gè)按鈕大小改變的話午衰，必定會(huì)改許多屬性，那么對(duì)于后期維護(hù)多多少少會(huì)帶來(lái)一些不便冒萄，今天漠白分享一種新的實(shí)現(xiàn)方法解決這一問(wèn)題苇经。
預(yù)覽地址：全等比縮放按鈕
單位選擇
既然要實(shí)現(xiàn)等比例縮放，那么我們首先肯定會(huì)想到一些尺寸單位宦言，比如百分比、em商模、rem奠旺，這里我感覺(jué)用em最為合適，因?yàn)?code>em的特性更適合我們的按鈕施流。
em特性：根據(jù)父元素字號(hào)進(jìn)行比例縮放响疚，如果自身設(shè)置了font-size則根據(jù)自身字號(hào)來(lái)計(jì)算比例。
關(guān)鍵的CSS樣式
寬高我覺(jué)得用
padding來(lái)實(shí)現(xiàn)是最好了瞪醋，如果寫(xiě)死的話忿晕，之后增加文字字?jǐn)?shù)肯定會(huì)影響樣式。然后利用
border-radius增加了一個(gè)小圓角银受，這里為了讓圓角也是等比縮放践盼，依然選擇em為單位鸦采。最后我把背景設(shè)置了一個(gè)小漸變，不過(guò)這里利用到一個(gè)小技巧咕幻，使之后增加的按鈕只需要操作背景顏色渔伯，而不用去操作漸變就能實(shí)現(xiàn)不同背景色的漸變效果。
之后要更改按鈕大小的話肄程，只需要更改字體大小就能實(shí)現(xiàn)等比例縮放锣吼，其他不需要做任何修改，是不是方便很多蓝厌？下邊是按鈕的實(shí)例代碼玄叠。
HTML代碼
<a class="but" href="#">增加</a>
<a class="but but2" href="#">編輯</a><br>
<a class="but but3" href="#">刪除</a>
<a class="but but4" href="#">警告</a>
按鈕的通用CSS
.but{
display: inline-block;
font-size: 14px;
color: #fff;
padding: .5em 1.2em;
border: 1px solid rgba(0,0,0,.14);
text-shadow: 0 -.03em .02em #335166;
border-radius: .3em;
background: #009688 linear-gradient(rgba(255,255,255,.3),transparent);
}
各自定義背景顏色的按鈕
.but2{
background-color: #1E9FFF;
}
.but3{
background-color: #FFB800;
}
.but4{
background-color: #FF5722;
}
