实现圆角彩色按钮代码,Css代码库,德仔网

代码语言

代码分类

【Css】实现圆角彩色按钮

作者:Dezai.CN / 发布于2013/7/1/ 634


	要实现这个效果，需要下面的样式定义：

	<!DOCTYPE html>
	<html>
	<head>
	 <title>css button</title>
	</head>
	<body>
	<style>
	 .button-primary,.button-primary:visited .button-primary:hover, a.button-primary:hover {
	 background-color: #2ea2cc;
	 cursor: pointer;
	 font-size: 13px;
	 text-decoration: none;
	 height: auto;
	 line-height: 1;
	 padding: .6em 1.2em;
	 font-weight: 300;
	 border: none;
	 -moz-border-radius: 3px;
	 -webkit-border-radius: 3px;
	 -o-border-radius: 3px;
	 -ms-border-radius: 3px;
	 border-radius: 3px;
	 color: #fff;
	 text-shadow: 0 -1px 0 rgb(0,116,162);
	 background-image: -moz-linear-gradient(top, #2ea2cc 0%, #0074a2 100%);
	 background-image: -webkit-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
	 background-image: -o-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
	 background-image: -ms-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
	 background-image: linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
	 -moz-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
	 -webkit-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
	 -o-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
	 -ms-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
	 box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
	 }
	</style>

	
	<a class="button-primary" href="##">BUTTON</a>

	<button class="button-primary">BUTTON</button>
	
	</body>
	</html>

试试其它关键字

　圆角彩色按钮　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)