制作彩色按鈕，純CSS3技術。
使用CSS3制作彩色按鈕
效果展示：
https://n.getimg.net/www/2019/04/1cbd16f8a53cfc.html
源代碼如下：
"utf-8">
彩色漸變按鈕title>
<style type=<span class="hljs-string">"text/css"</span>>
.button{
padding: <span class="hljs-number">10</span>px <span class="hljs-number">14</span>px;<span class="hljs-comment">/*內邊距*/</span>
border-width: <span class="hljs-number">0</span>px; <span class="hljs-comment">/* 邊框寬度 */</span>
border-radius: <span class="hljs-number">18</span>px; <span class="hljs-comment">/* 邊框半徑 */</span>
background: -webkit-linear-gradient(left , <span class="hljs-meta">#00b8bf,#d800b8 100%);; /* 背景顏色 */</span>
cursor: pointer; <span class="hljs-comment">/* 鼠標移入按鈕范圍時出現手勢 */</span>
outline: none; <span class="hljs-comment">/* 不顯示輪廓線 */</span>
font-family: Microsoft YaHei; <span class="hljs-comment">/* 設置字體 */</span>
color: white; <span class="hljs-comment">/* 字體顏色 */</span>
font-size: <span class="hljs-number">16</span>px; <span class="hljs-comment">/* 字體大小 */</span>
opacity: <span class="hljs-number">0.8</span>;<span class="hljs-comment">/*透明度*/</span>
line-height: <span class="hljs-number">1</span>;<span class="hljs-comment">/*line-height 屬性設置行間的距離（行高）*/</span>
}
.button:hover { <span class="hljs-comment">/* 鼠標移入按鈕范圍時改變透明度 */</span>
opacity: <span class="hljs-number">1</span>;<span class="hljs-comment">/*透明度*/</span>
<span class="hljs-comment">/*感謝：https://blog.csdn.net/wangjingqiannihao/article/details/76152593*/</span>
}
style>
head>
<body>
<button type=<span class="hljs-string">"button"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"button"</span>><a>按鈕文字a>button>
body>
html>
</pre>
<p>感謝：</p>
<ul>
<li>https://blog.csdn.net/wangjingqiannihao/article/details/76152593</li>
<li>https://www.cssplus.org/wordpress-theme-inspire.html</li>
</ul>
<h1>CSS 按鈕button美化</h1>
<pre class="ql-syntax" spellcheck="false">.login-button { <span class="hljs-comment">/* 按鈕美化 */</span>
width: <span class="hljs-number">270</span>px; <span class="hljs-comment">/* 寬度 */</span>
height: <span class="hljs-number">40</span>px; <span class="hljs-comment">/* 高度 */</span>
border-width: <span class="hljs-number">0</span>px; <span class="hljs-comment">/* 邊框寬度 */</span>
border-radius: <span class="hljs-number">3</span>px; <span class="hljs-comment">/* 邊框半徑 */</span>
background: <span class="hljs-meta">#1E90FF; /* 背景顏色 */</span>
cursor: pointer; <span class="hljs-comment">/* 鼠標移入按鈕范圍時出現手勢 */</span>
outline: none; <span class="hljs-comment">/* 不顯示輪廓線 */</span>
font-family: Microsoft YaHei; <span class="hljs-comment">/* 設置字體 */</span>
color: white; <span class="hljs-comment">/* 字體顏色 */</span>
font-size: <span class="hljs-number">17</span>px; <span class="hljs-comment">/* 字體大小 */</span>
}
.login-button:hover { <span class="hljs-comment">/* 鼠標移入按鈕范圍時改變顏色 */</span>
background: <span class="hljs-meta">#5599FF;</span>
}
---------------------
作者：wangjingqiannihao
來源：CSDN
原文：https:<span class="hljs-comment">//blog.csdn.net/wangjingqiannihao/article/details/76152593 </span>
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
</pre>
<p>效果：</p>
<figure class="content-img-box " id=""><img alt="制作彩色按鈕" src="https://n.getimg.net/www/2018/12/15904b152ca874.png" id="8268682B" class="po-img-big"><figcaption class="addDesn"></figcaption></figure>