如何透過CSS創造不同效果的按鈕

透過CSS可以實現多種按鈕效果，例如透過CSS漸層屬性可以設定顏色漸層的效果按鈕，透過box-shadow實現按下效果按鈕等

今天在本篇文章中將分享如何製作幾種不同樣式的按鈕效果，它們分別是平面，邊框，漸層和陰影以及按下樣式按鈕。接下來在文章中將和大家詳細介紹如何透過CSS程式碼來達成效果。

HTML程式碼

<div class="pm">
	<button>平面按钮</button>
</div>

基礎的CSS樣式程式碼

button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
 box-shadow:none;
 border-radius: 0;
}

#（1）平面樣式CSS按鈕

平面樣式按鈕的使用現在非常流行，並且符合無所不在的平面設計趨勢。 ，這些的平面樣式按鈕效果很好看。以下程式碼為按鈕處於正常的情況下的狀態

.pm button {
  color:#fff;
  background-color:#6496c8;
  border:none;
}

效果圖：

# 

##（2 ）邊框樣式CSS按鈕

邊框樣式按鈕與平面按鈕屬於同一類別。唯一的區別是，我們將使用邊框來代替平面按鈕所使用的背景顏色。以下程式碼是按鈕處於正常的情況下的狀態

.pm button {
  color:#444;
 border:5px solid #6496c8;
  background-color: #fff;
}

效果圖：

（3）漸層和陰影樣式CSS按鈕

這種漸層和陰影樣式的按鈕更符合我們過去的日子所看到的按鈕效果。如果你喜歡那些色彩多彩的那麼漸層/陰影樣式的按鈕適合你。創建這款按鈕的好處是它的效果全部由CSS完成，因此可以輕鬆的對其放大或縮小而不必擔心會丟失分辨率，或者必須創建新圖像。以下程式碼是按鈕處於正常的情況下的狀態

.pm button {
  color:#fff;
  text-align: center;
  box-shadow:inset 0 0 0 1px #e91e637d; 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
  background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); 
  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}

效果圖：

（4 ）按下樣式CSS按鈕

這些「按下」式按鈕結合了一些平面設計和假象，讓使用者感覺他們實際上按下了按鈕。當用戶按下它時，它似乎陷入了頁面。它的實現需要用到陰影來設置，使其具有3D彈出外觀。以下程式碼是按鈕處於正常的情況下的狀態

.pm button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}

效果圖：

#總結：以上就是這篇文章的全部內容了，希望透過這篇文章可以讓大家學會使用CSS來製作按鈕效果。

以上是如何透過CSS創造不同效果的按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！