CSS Button

最新推荐文章于 2023-08-16 10:40:24 发布

suyijianke

最新推荐文章于 2023-08-16 10:40:24 发布

阅读量100

点赞数

分类专栏： CSS 文章标签： CSS button

本文链接：https://blog.csdn.net/suyijianke/article/details/84688086

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS Button

<html>
<head>
<style type="text/css">
.btn {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	color:#777777;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
.btn:active {
	position:relative;
	top:1px;
}
/* CSS按钮生成器 */
</style>
</head>
<body>
<a href="#" class="btn">css button</a>
</body>
</html>