CSS3 Gradient按钮demo

最新推荐文章于 2021-12-29 20:17:47 发布

ywj5200

最新推荐文章于 2021-12-29 20:17:47 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/ywj5200/article/details/53405235

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS3 Gradient</title>
	<style type="text/css">
		a{
			text-decoration:none;
			color:#63BDA8;
		}
		.button {
		    border: 1px solid #e9e9e9;
		    border-radius: 3px;
		    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		    font-weight: bold;
		    text-align: center;
		    -moz-text-shadow: 1px 1px 0 #fff;
		    -webkit-text-shadow: 1px 1px 0 #fff;
		    text-shadow: 1px 1px 0 #fff;
		    white-space: nowrap;
		    display: block;
		    font-size: 22px;
		    margin: 2em auto;
		    padding: 9px 0 10px;
		    width: 340px;
		    background: #EFEFEF;
		    background: -moz-linear-gradient(top,#F7F7F7 0,#DFDFDF 100%);
		    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F7F7F7),color-stop(100%,#DFDFDF));
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 );
		}
		.button:hover {
		    border-color: #63BDA8;
		    color: #fff;
		    font-weight: normal;
		    text-decoration: none;
		    -moz-text-shadow: none;
		    -webkit-text-shadow: none;
		    text-shadow: none;
		    background: #95D9C8;
		    background: -moz-linear-gradient(top,#95D9C8 0,#63C8B8 100%);
		    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#95D9C8),color-stop(100%,#63C8B8));
		    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#95D9C8',endColorstr='#63C8B8',GradientType=0);
		}
	</style>
</head>
<body>
	<a href="#quick-start" class="button">
        <span class="extra">Gradient 按钮</span>
    </a>
</body>
</html>