卡卡網(wǎng)

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

demodownload

實例介紹

純CSS實現(xiàn)，按鈕邊框為彩色線條。

HTML代碼

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

非常簡單，HTML代碼是一個button標簽，它的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代碼設計思路是，把按鈕邊框寬度設為0，border-width:0;，使用背景漸變屬性：background:linear-gradient()，然后使用:after偽元素設置按鈕內容content:"Button";，以及按鈕背景顏色background:#111;，調整位置。

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

總結

本文介紹的實例很簡單，通過該實例，我們可以學習偽元素:after的使用，如果你也喜歡這個按鈕樣式，那么可以直接下載源碼使用。

相關文章

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

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

標簽: border  button  按鈕