CSS CSS3按钮(号召性用语)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS CSS3按钮(号召性用语)相关的知识,希望对你有一定的参考价值。

/* CSS3 BUTTON 
----------------------------------------------------- */

.button {
	border:1px solid #1D4253;
	color:#FFFFFF;
	text-shadow:0 -1px 0 #004e68;
	font-size:12px;
	display:inline-block;
	margin:8px 0;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background-color:#007197;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,93,124)),
		color-stop(1, rgb(0,136,181))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,93,124) 0%,
		rgb(0,136,181) 100%
	);
	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}

.button:hover {
	background-color:#0081ab;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,116,154)),
		color-stop(1, rgb(0,165,198))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,116,154) 0%,
		rgb(0,165,198) 100%
	);
	text-decoration:none;
}

.button:active {
	background-color:#006486;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,133,166)),
		color-stop(1, rgb(0,83,122))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,133,166) 0%,
		rgb(0,83,122) 100%
	);
	-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}

.button span {
	padding:8px 20px;
	border-top:1px solid #00B8D3;
	display:block;
	font-weight:bold;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;	
}

.button span:active { border-top-color:transparent; }

/* HTML MARK-UP
----------------------------------------------------- */

<a href="#" class="button"><span>CSS3 Button - No Images</span></a>

以上是关于CSS CSS3按钮(号召性用语)的主要内容,如果未能解决你的问题,请参考以下文章

html 号召性用语按钮

php 号召性用语短信和vc附加组件

玩家卡的 Twitter 原生应用程序中没有号召性用语

MVC AJAX 号召性用语不将 JSON 返回到 AJAX,而仅返回带有纯 JSON 的页面

Swift:removefromSuperview 移除约束

光滑轮播:光滑轮播内部的按钮可以覆盖轮播?