CSS3 制作彩色按钮-CSS 按钮 button 美化

1
"utf-8">
2
彩色渐变按钮title>
3
  <style type=<span class="hljs-string">"text/css"</span>>
4
    .button{
5
      padding: <span class="hljs-number">10</span>px <span class="hljs-number">14</span>px;<span class="hljs-comment">/*内边距*/</span>
6
      border-width: <span class="hljs-number">0</span>px; <span class="hljs-comment">/* 边框宽度 */</span>
7
      border-radius: <span class="hljs-number">18</span>px; <span class="hljs-comment">/* 边框半径 */</span>
8
       background: -webkit-linear-gradient(left , <span class="hljs-meta">#00b8bf,#d800b8 100%);; /* 背景颜色 */</span>
9
      cursor: pointer; <span class="hljs-comment">/* 鼠标移入按钮范围时出现手势 */</span>
10
      outline: none; <span class="hljs-comment">/* 不显示轮廓线 */</span>
11
      font-family: Microsoft YaHei; <span class="hljs-comment">/* 设置字体 */</span>
12
      color: white; <span class="hljs-comment">/* 字体颜色 */</span>
13
      font-size: <span class="hljs-number">16</span>px; <span class="hljs-comment">/* 字体大小 */</span>
14
      opacity: <span class="hljs-number">0.8</span>;<span class="hljs-comment">/*透明度*/</span>
15
      line-height: <span class="hljs-number">1</span>;<span class="hljs-comment">/*line-height 属性设置行间的距离（行高）*/</span>
16
    }
17
    .button:hover { <span class="hljs-comment">/* 鼠标移入按钮范围时改变透明度 */</span>
18
      opacity: <span class="hljs-number">1</span>;<span class="hljs-comment">/*透明度*/</span>
19
      <span class="hljs-comment">/*感谢：https://blog.csdn.net/wangjingqiannihao/article/details/76152593*/</span>
20
}
21
  style>
22
head>
23

24
<body>
25
  <button type=<span class="hljs-string">"button"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"button"</span>><a>按钮文字a>button>
26

27
body>
28
html>
29
</pre>
30
<p>感谢：</p>
31
<ul>
32
<li>https://blog.csdn.net/wangjingqiannihao/article/details/76152593</li>
33
<li>https://www.cssplus.org/wordpress-theme-inspire.html</li>
34
</ul>
35
<h1>CSS 按钮button美化</h1>
36
<pre class="ql-syntax" spellcheck="false">.login-button { <span class="hljs-comment">/* 按钮美化 */</span>
37
  width: <span class="hljs-number">270</span>px; <span class="hljs-comment">/* 宽度 */</span>
38
  height: <span class="hljs-number">40</span>px; <span class="hljs-comment">/* 高度 */</span>
39
  border-width: <span class="hljs-number">0</span>px; <span class="hljs-comment">/* 边框宽度 */</span>
40
  border-radius: <span class="hljs-number">3</span>px; <span class="hljs-comment">/* 边框半径 */</span>
41
  background: <span class="hljs-meta">#1E90FF; /* 背景颜色 */</span>
42
  cursor: pointer; <span class="hljs-comment">/* 鼠标移入按钮范围时出现手势 */</span>
43
  outline: none; <span class="hljs-comment">/* 不显示轮廓线 */</span>
44
  font-family: Microsoft YaHei; <span class="hljs-comment">/* 设置字体 */</span>
45
  color: white; <span class="hljs-comment">/* 字体颜色 */</span>
46
  font-size: <span class="hljs-number">17</span>px; <span class="hljs-comment">/* 字体大小 */</span>
47
}
48
.login-button:hover { <span class="hljs-comment">/* 鼠标移入按钮范围时改变颜色 */</span>
49
  background: <span class="hljs-meta">#5599FF;</span>
50
}
51
---------------------
52
作者：wangjingqiannihao
53
来源：CSDN
54
原文：https:<span class="hljs-comment">//blog.csdn.net/wangjingqiannihao/article/details/76152593 </span>
55
版权声明：本文为博主原创文章，转载请附上博文链接！
56
</pre>
57
<p>效果：</p>
58
<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>