css 常用的button

最新推荐文章于 2023-10-26 19:27:52 发布

翻译最新推荐文章于 2023-10-26 19:27:52 发布 · 821 阅读

js/css/html 专栏收录该内容

18 篇文章

订阅专栏

a {
	color: #21759B;
	text-decoration: none;
}

a:hover {
	color: #D54E21;
}

.button {
	background: #f7f7f7;
	border: 1px solid #cccccc;
	color: #555;
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 26px;
	height: 28px;
	margin: 0;
	padding: 0 10px 1px;
	cursor: pointer;
	-webkit-border-radius: 3px;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
	vertical-align: top;
}

.button.button-large {
	height: 29px;
	line-height: 28px;
	padding: 0 12px;
}

.button:hover,
		.button:focus {
	background: #fafafa;
	border-color: #999;
	color: #222;
}

.button:focus {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

.button:active {
	background: #eee;
	border-color: #999;
	color: #333;
	-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
	box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
}