css实现炫酷立体清爽按钮效果代码-html代码-BFW代码库

css实现炫酷立体清爽按钮效果代码

代码语言：html

代码描述：css实现炫酷立体清爽按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
	background:#666;
	font-family:Helvetica,sans-serif
}
.button,.button-bevel {
	font-family:Helvetica,sans-serif;
	font-size:13px;
	color:#fff;
	text-decoration:none;
	display:inline-block;
	text-align:center;
	padding:7px 20px 9px;
	margin:.5em .5em .5em 0;
	cursor:pointer;
	text-shadow:0 1px 1px rgba(0,0,0,0.4);
	-webkit-transition:.1s linear;
	-moz-transition:.1s linear;
	-ms-transition:.1s linear;
	-o-transition:.1s linear;
	transition:.1s linear;
	border-radius:2px;
	box-shadow:inset rgba(255,255,255,0.3) 1px 1px 0
}
.button:active {
	box-shadow:inset rgba(0,0,0,0.4) 0 0 6px
}
.orange {
	background:#ffb700;
	background:-moz-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,183,0,1)),color-stop(100%,rgba(255,140,0,1)));
	background:-webkit-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-o-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:-ms-linear-gradient(top,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	background:linear-gradient(to bottom,rgba(255,183,0,1) 0,rgba(255,140,0,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb700',endColorstr='#ff8c00',GradientType=0);
	border:1px solid #e59500
}
.orange:hover {
	background:#ffcb48;
	background:-moz-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,203,72,1)),color-stop(100%,rgba(255,156,35,1)));
	background:-webkit-linear-gradient(top,rgba(255,203,72,1) 0,rgba(255,156,35,1) 100%);
	background:-o-linear-gradient(top,rgba(255,2.........完整代码请登录后点击上方下载按钮下载查看