制作彩色按钮，纯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>
