通過CSS創建不同效果按鈕的方法

通過CSS創建不同效果按鈕的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

通過CSS可以實現多種按鈕效果，比如通過CSS漸變屬性可以設置顏色漸變的效果按鈕，通過 box-shadow實現按下效果按鈕等

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創建不同效果按鈕的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。