溫馨提示×

css3如何寫橫向漸變按鈕

養(yǎng)魚的貓咪
939
2021-03-25 15:12:04
欄目: 編程語言

在css3中設置按鈕橫向漸變的方法：1.創(chuàng)建按鈕；2.設置按鈕寬高；3.使用background的-webkit-linear-gradient屬性設置橫向漸變；

css3如何寫橫向漸變按鈕

在css3中設置按鈕橫向漸變的方法

1.首先，在頁面中創(chuàng)建一個按鈕；

 <body>
   <button type="button" class="colour">漸變按鈕</button>
 </body>

2.按鈕創(chuàng)建好后，在css中設置按鈕的寬度和高度；

button{
  width:150px;
  height:70px;
}

3.按鈕的寬高設置好后，使用background中的-webkit-linear-gradient屬性即可設置按鈕橫向漸變；

 button {
   width: 150px;
   height: 70px;
   background:-webkit-linear-gradient(left,red,pink,#fff);
}

效果：

css3如何寫橫向漸變按鈕

0 踩