0°

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

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

使用CSS3制作彩色按钮

效果展示:

https://css3.wiki/2018/1218.html

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

源代码如下:

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

<body>
	<button type="button" class="button"><a>按钮文字a>button>
	
body>
html>

感谢:

  • https://blog.csdn.net/wangjingqiannihao/article/details/76152593
  • https://www.cssplus.org/wordpress-theme-inspire.html

CSS 按钮button美化

.login-button { /* 按钮美化 */
	width: 270px; /* 宽度 */
	height: 40px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 17px; /* 字体大小 */
}
.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}
--------------------- 
作者:wangjingqiannihao 
来源:CSDN 
原文:https://blog.csdn.net/wangjingqiannihao/article/details/76152593 
版权声明:本文为博主原创文章,转载请附上博文链接!

效果:

制作彩色按钮
你也有好的想法?点击右下角的“灯泡”,开始你的创作。与我们一起,让生活更愉悦,让工作更高效,让世界更美好!
相册
随记
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论