CSS實現漸層色按鈕的效果（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

CSS實現漸層色按鈕的效果（程式碼實例）

不言

Nov 09, 2018 pm 05:25 PM

這篇文章將給大家分享一個創造漸層顏色按鈕的效果，內容很詳細，有興趣的朋友可以看一看具體內容。

話不多說，我們直接進入正題~

漸進式按鈕程式碼如下：

button-gradient.css（css文件)

.gradientButton{
  border:1px solid #ff6a00;  
  width:100px;  height:28px;  
  background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/
}

登入後複製

button-gradient.html（html檔案）

<!DOCTYPE html>
<html xmlns=" 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="button-gradient.css" />
  </head>
  <body>
  <div><button type="submit" class="gradientButton">Button</button></div>
  <hr />
  </body>
  </html>

登入後複製

漸層按鈕效果如下：

CSS實現漸層色按鈕的效果（程式碼實例）

##帶有圖示的漸層按鈕

CSS實現漸層色按鈕的效果（程式碼實例）此程式碼在漸層按鈕上顯示一個圖示。

###程式碼如下：######image-button-gradient.css（css檔案）###

#buttonImage {
  background-image:url(&#39;/img/search.png&#39;);  
  display:inline-block;  
  margin-top:2px;  
  width:16px;  
  height:16px;
}
.flatbutton{
  border:1px solid #3079ed;  
  width:100px;  
  height:28px;  
  background:linear-gradient(to bottom, #9bcfff,#4683ea); 
}

登入後複製

###image-button-gradient.html（HTML檔案）###

<!DOCTYPE html>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="image-button-gradient.css" />
  </head>
  <body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
  </body>
  </html>

登入後複製

## #說明：它與前一個字串標題的漸層按鈕幾乎相同。為了顯示圖像，在按鈕標記中描述了span標記。 ######效果如下：################

以上是CSS實現漸層色按鈕的效果（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn