纯CSS设计按钮

最新推荐文章于 2024-08-09 16:30:00 发布

petterp

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/petterp/article/details/81949578

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

不需要图片和js技术。

能够兼容各种浏览器，不兼容opera.

支持三种按钮状态，即正常，悬停和激活。

可以应用到任何html元素。

完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计按钮</title>
	<style type="text/css">
		body{
			background: #ededed;
			margin: 30px auto;
			color: #999;
		}
		.button{
			/*定义渐变按钮样式*/
			display: inline-block;
			zoom:1;
			/*zoom和*display都是为了兼容IE7*/
			*dispaly:inline;
			vertical-align: baseline;
			margin: 0 2px;
			outline: none;
			cursor: pointer;
			text-align: center;
			text-decoration: none;
			font: 14px/100% 楷体;
			padding: .5em 2em .55em;
			/*设计按钮圆角，盒子阴影和文本阴影特效*/
			text-shadow: 0 1px 1px rgba(0,0,0,.3);
			-WebKit-border-radius:.5em;
			-moz-border-radius:.5em;
			border-radius: .5em;
			-WebKit-box-shadow:0 1px 2px rgba(0,0,0,.2);
			-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
			box-shadow: 0 1px 2px rgba(0,0,0,.2);
		}
		.button:hover{text-decoration: none;}
		.button:active{
			postion:relative;
			top: 1px;
		}
		.bigrounded{
			/*定义大圆角样式类*/
			-WebKit-border-radius:2em;
			-moz-border-radius:2em;
			border-radius: 2em;
		}
		.medium{
			/*定义大按钮样式类*/
			font-size: 12px;
			padding: .4em 1.5em .42em;
		}
		.small{
			/*定义小按钮样式*/
			font-size: 11px;
			padding: .2em 1em .275em;
		}
		/*设计颜色样式类：黑色风格的按钮*/
		/*通过设计不同颜色样式类，可以设计不同风格的按钮效果*/
		.black{
			/*黑色样式类*/
			color: #d7d7d7;
			border: solid 1px #333;
			background: #333;
			background: -WebKit-gradient(linear,left yop,left bottom,from(#666),to(#000));
			background: -moz-linear-gradient(top,#666,#000);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');
		}
		.black:hover{
			/*黑色光标经过样式类*/
			background: #000;
			background: -WebKit-gradient(linear,left top,left bottom,from(#444),to(#000));
			background: -moz-linear-gradinet(top,#444,#000);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
		}
		.black:active{
			/*黑色光标激活样式类*/
			color: #666;
			background: -WebKit-gradient(linear,left top,left bottom,from(#000),to(#444));
			background: -moz-linear-gradinet(top,#000,#444);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#444444');
		}
	</style>
</head>

<body>
	<div>
	<a href="#" class="button black">圆角按钮</a>
		<a href="#" class="button black bigrounded">大号圆角按钮</a>
		<a href="#" class="button black medium">中号按钮</a>
		<a href="#" class="button black small">小号按钮</a>
	</div>
</body>
</html>