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>
教程

怎么用纯代码限制评论间隔时间 - WordPress教程

2020-11-11 0:25:00

VUE模块

v-on事件处理 - Vue3新手基础教程

2022-8-19 16:02:20

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索