0°

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

制作彩色按钮,纯CSS3技术。

使用CSS3制作彩色按钮

效果展示:

https://n.getimg.net/www/2019/04/1cbd16f8a53cfc.html

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

源代码如下:

"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>
因主题原因,在示例代码中,有部分
随记
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论