卡卡網(wǎng)

本文將介紹一款CSS實(shí)現(xiàn)的彩色按鈕邊。

demodownload

實(shí)例介紹

純CSS實(shí)現(xiàn)，按鈕邊框?yàn)椴噬€條。

HTML代碼

<button class="btn">Button</button>

非常簡(jiǎn)單，HTML代碼是一個(gè)button標(biāo)簽，它的class值為btn。

CSS代碼

.btn{
  padding:30px 30px;
  font-size:50px;
  font-weight:700;
  font-family:"Open+Sans";
  color:#fff !important;
  border-radius:7px;
  text-transform:uppercase;
  border-width:0;
  background:linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  position:relative;
}
.btn:after{
  top:2px;
  left:2px;
  right:2px;
  bottom:2px;
  border-radius:7px;
  position:absolute;
  content:"Button";
  background:#111;
  padding-top:10%;
}

CSS代碼設(shè)計(jì)思路是，把按鈕邊框?qū)挾仍O(shè)為0，border-width:0;，使用背景漸變屬性：background:linear-gradient()，然后使用:after偽元素設(shè)置按鈕內(nèi)容content:"Button";，以及按鈕背景顏色background:#111;，調(diào)整位置。

按鈕上的文字“button”是在CSS偽元素:after里設(shè)置，content:"Button";，而不是在html代碼里寫。

總結(jié)

本文介紹的實(shí)例很簡(jiǎn)單，通過(guò)該實(shí)例，我們可以學(xué)習(xí)偽元素:after的使用，如果你也喜歡這個(gè)按鈕樣式，那么可以直接下載源碼使用。

相關(guān)文章

• CSS實(shí)現(xiàn)的拖拽式確認(rèn)按鈕【演示/源碼下載】
• CSS3實(shí)現(xiàn)的發(fā)光動(dòng)畫按鈕(有光隨鼠標(biāo)移動(dòng)的懸停效果)
• 純CSS3實(shí)現(xiàn)的保存(save)、下載(download)按鈕4種樣式
• 純CSS：鼠標(biāo)移上后，鏈接按鈕顏色顯示漸變效果
• 4款CSS 3D按鈕點(diǎn)擊過(guò)渡效果
• 6個(gè)CSS按鈕邊框過(guò)渡動(dòng)畫效果
• 簡(jiǎn)單又好看的CSS單選按鈕(radio)樣式
• 30個(gè)漂亮的CSS漸變按鈕，鼠標(biāo)滑過(guò)(hover)動(dòng)畫效果

• CSS3顏色漸變按鈕 鼠標(biāo)劃過(guò)變色
• 【8個(gè)實(shí)例】純CSS按鈕(button)，簡(jiǎn)單漂亮實(shí)用
• CSS懸停效果按鈕一簡(jiǎn)單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
• 很好看的css3動(dòng)畫按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
• 漂亮懸停效果的CSS3動(dòng)畫按鈕【5個(gè)實(shí)例代碼】
• 漂亮的偽元素CSS按鈕5個(gè)實(shí)例代碼
• 20個(gè)純CSS3實(shí)現(xiàn)的彩色透明水晶按鈕

標(biāo)簽: border  button  按鈕