- 下拉菜单中选择代码
- <img src="***" /></span>***************<br />
- <input type="radio" name ="bank" checked ="checked" />
- 手机注册
- <p>
- <label>电话:</label>
- <input name="" type="text" class="txt"/>
- <span>用于登录和找回密码,不会公开</span></p>
- <p>
- <label>短信验证码:</label>
- <input name="" type="text" class="txt"/>
- <span>请输入手机收到的验证码</span></p>
- <p>
- <label>创建密码:</label>
- <input name="" type="text" class="txt"/>
- <span>6-32字符,可使用字母、数字、符号</span></p>
- <p>
- <label>确认密码:</label>
- <input name="" type="text" class="txt"/>
- <span>请再次输入密码</span></p>
- <p>
- <input type="image" class="btn" src="***"/>
- <a href="#">《美淘网用户协议》</a> </p>
- 邮箱注册
- <p>
- <label for="txtEmail">邮箱:</label>
- <input name="" type="text" class="txt" id="txtEmail "/>
- <span>推荐使用qq邮箱</span></p>
- <p>
- <label for="userName" accesskey="n">用户名:</label>
- <input name="" type="text" class="txt" id="userName"/>
- <span>4-16字符,不能包含数字</span></p>
- <p>
- <label for="pwd1">创建密码:</label>
- <input name="" type="text" class="txt" id="pwd1"/>
- <span>6-32字符</span></p>
- <p>
- <label for="pwd2">确认密码:</label>
- <input name="" type="text" class="txt" id="pwd2"/>
- <span>请再次输入密码</span></p>
- <p>
- <label for="city">所在城市:</label>
- <select class="txt" id="city">
- <option>--省--</option>
- <option>北京</option>
- <option>湖北</option>
- </select>
- <select class="txt">
- <option>--市区--</option>
- <option>北京</option>
- <option>武汉</option>
- </select>
- </p>
- <p>
- <label>验证码:</label>
- <input name="" type="text" class="txt check" />
- <img src="images/code_img.gif" style="vertical-align:bottom" /></p>
- <p>
- <input type="image" class="btn" src="images/register.jpg"/>
- <a href="#">《美淘网用户协议》</a> </p>
- 登录
- <div id="login">
- <form>
- <fieldset>
- <legend>登录MEITAO.COM</legend>
- <ul>
- <li><a href="#emailreg2" class="current">邮箱注册</a></li>
- <li><a href="#phonereg2">手机用户</a></li>
- </ul>
- <div class="box">
- <div id="emailreg2">
- <p>
- <label for="userName" accesskey="n">用户名:</label>
- <input name="" type="text" class="txt" id="Text2"/>
- <p>
- <label for="pwd1"> 密码: </label>
- <input name="" type="text" class="txt" id="Text3"/>
- <p>
- <input type="image" class="btn" src="images/登录.jpg"/>
- <a href="#">忘记密码了?</a> </p>
- </div>
- <div id="phonereg2">
- <p>
- <label>电话:</label>
- <input name="" type="text" class="txt"/>
- </p>
- <p>
- <label>确认密码:</label>
- <input name="" type="text" class="txt"/>
- </p>
- <p>
- <input type="image" class="btn" src="images/登录.jpg"/>
- <a href="#">忘记密码了?</a> </p>
- </div>
- </div>
- </fieldset>
- </form>
- </div>
- 首先我们打好框架的代码,添加按钮
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
- <style>
- </style>
- </head>
- <body>
- <button type="button" id="button1">登陆</button>
- </body>
- </html>
- 用浏览器打开后会看到这么一个按钮,下面我们用css改变它的样式
- #button1{
- width: 100px;
- height: 30px;
- font-size: 18px;
- font-family: 微软雅黑;
- letter-spacing: 8px;
- padding-left: 12px;
- }
- 添加基本的样式,设置大小为100*30px,字体大小18px,微软雅黑,字间距8px,向右移12px居中,效果如下
- 继续往#button1内添加样式
- border-radius: 5px;
- 设置按钮为圆角矩形,圆角半径为5px,效果如下
- 上面的边框很难看,继续改边框的样式,添加
- border: 1px solid #2576A8;
- 设置按钮边框宽为1px,样式为solid,颜色为#2576A8,效果如下
- 给按钮加上渐变色
- background: -webkit-linear-gradient(top,#66B5E6,#2e88c0);
- background: -moz-linear-gradient(top,#66B5E6,#2e88c0);
- background: linear-gradient(top,#66B5E6,#2e88c0);
- background: -ms-linear-gradient(top,#66B5E6,#2e88c0);
- 这四行是为兼容不同浏览器,颜色都是一样的,ie浏览器可能无法显示效果,
- 效果如下
- 为更好的质感,再加一些内阴影效果
- box-shadow: 0 1px 2px #8AC1E2 inset,0 -1px 0 #316F96 inset;
- 其中
- 0 1px 2px #B8DCF1 inset 是内高光
- 0 -1px 0 #316F96 inset 是内阴影
- 效果如下
- 编辑一下字体样式
- color: #fff;
- text-shadow: 1px 1px 0.5px #22629B;
- 设置颜色为白色,文本阴影为向右向下各1px,0.5px大小,颜色是#22629B;
- 最后设置鼠标放在上面时的变化
- #button1:hover{
- background: -webkit-linear-gradient(top,#8DC9EF,#4E9FD1);
- background: -moz-linear-gradient(top,#8DC9EF,#4E9FD1);
- background: linear-gradient(top,#8DC9EF,#4E9FD1);
- background: -ms-linear-gradient(top,#8DC9EF,#4E9FD1);
- }
- 同样四行是为兼容不同浏览器
- 完整css代码为
- #button1 {
- width: 100px;
- height: 30px;
- font-size: 18px;
- font-family: 微软雅黑;
- letter-spacing: 8px;
- padding-left: 12px;
- border-radius: 5px;
- background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);
- background: -moz-linear-gradient(top, #66B5E6, #2e88c0);
- background: linear-gradient(top, #66B5E6, #2e88c0);
- background: -ms-linear-gradient(top, #66B5E6, #2e88c0);
- border: 1px solid #2576A8;
- box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;
- color: #fff;
- text-shadow: 1px 1px 0.5px #22629B;
- }
- #button1:hover {
- background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
- background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
- background: linear-gradient(top, #8DC9EF, #4E9FD1);
- background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
- }
- 按钮样式一:
- [html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <style>
- #login_click{ margin-top:32px; height:40px;}
- #login_click a
- {
- text-decoration:none;
- background:#2f435e;
- color:#f2f2f2;
- padding: 10px 30px 10px 30px;
- font-size:16px;
- font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
- font-weight:bold;
- border-radius:3px;
- -webkit-transition:all linear 0.30s;
- -moz-transition:all linear 0.30s;
- transition:all linear 0.30s;
- }
- #login_click a:hover { background:#385f9e; }
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div style=" width:386px; height:332px; margin-left:auto; margin-right:auto">
- <div id="login_form" >
- <div id="form_account">
- 账户:<input id="txt_account" runat="server" type="text" placeholder="用户名或邮件地址" />
- </div>
- <div id="form_password" >
- 密码:<input id="txt_password" runat="server" type="password" placeholder="请输入密码" />
- </div>
- <div id="login_click">
- <a id="btlogin" href="#">登 录</a>
- </div>
- </div>
- </div>
- </div>
- </form>
- </body>
- </html>
- 按钮样式二:
- [html] view plain copy
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Image Rollover with CSS</title>
- <style type="text/css" media="screen">
- a.button { background:url(rss-feed-img.png) repeat 0px 0px; width: 123px; height: 44px; display: block; }
- a.button span { display: none; }
- a.button:hover { background: url(rss-feed-img.png) repeat 0px -44px; }
- </style>
- </head>
- <body>
- <a href="#" class="button">
- <span>RSS Feeds</span>
- </a>
- </body>
- </html>
- 按钮样式三:
- [html] view plain copy
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Untitled Document</title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <link rel="stylesheet" type="text/css" href="" />
- <script type="text/javascript" src="btn.js"></script>
- <style type="text/css" media="screen">
- body { padding: 20px; font-size: 0.85em; font-family: georgia, serif; }
- .btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
- .btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; }
- .btn i { background-position: top left; position: absolute; margin-bottom: -5px; top: 0; left: 0; width: 5px; height: 5px; }
- .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
- .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
- .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
- * html .btn span,
- * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }
- .btn.blue { background: #2ae; }
- .btn.green { background: #9d4; }
- .btn.pink { background: #e1a; }
- .btn:hover { background-color: #a00; }
- .btn:active { background-color: #444; }
- .btn[class] { background-image: url(shade.png); background-position: bottom; }
- * html .btn { border: 3px double #aaa; }
- * html .btn.blue { border-color: #2ae; }
- * html .btn.green { border-color: #9d4; }
- * html .btn.pink { border-color: #e1a; }
- * html .btn:hover { border-color: #a00; }
- p { clear: both; padding-bottom: 2em; }
- form { margin-top: 2em; }
- form p .btn { margin-right: 1em; }
- textarea { margin: 1em 0;}
- </style>
- </head>
- <body>
- <p><a href="#" class="btn blue">This is a blue button</a></p>
- <p><a href="#" class="btn green">This should be a green button</a></p>
- <p><big><a href="#" class="btn blue big">Big Text</a></big></p>
- <form method="post" action="#">
- <fieldset>
- <legend>Form Example</legend>
- <div><input type="text" /></div>
- <div><textarea cols="40" rows="10"></textarea></div>
- <p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p>
- </fieldset>
- </form>
- </body>
- </html>
- 按钮集合
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>36种漂亮的CSS3网页按钮Button样式</title>
- <style type="text/css">
- body{
- background: #f5faff;
- }
- .demo_con{
- width: 960px;
- margin:40px auto 0;
- }
- .button{
- width: 140px;
- line-height: 38px;
- text-align: center;
- font-weight: bold;
- color: #fff;
- text-shadow:1px 1px 1px #333;
- border-radius: 5px;
- margin:0 20px 20px 0;
- position: relative;
- overflow: hidden;
- }
- .button:nth-child(6n){
- margin-right: 0;
- }
- .button.gray{
- color: #8c96a0;
- text-shadow:1px 1px 1px #fff;
- border:1px solid #dce1e6;
- box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
- background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
- background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
- background: linear-gradient(top,#f2f3f7,#e4e8ec);
- }
- .button.black{
- border:1px solid #333;
- box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
- background: -webkit-linear-gradient(top,#656565,#4c4c4c);
- background: -moz-linear-gradient(top,#656565,#4a4a4a);
- background: linear-gradient(top,#656565,#4a4a4a);
- }
- .button.red{
- border:1px solid #b42323;
- box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
- background: -webkit-linear-gradient(top,#d53939,#b92929);
- background: -moz-linear-gradient(top,#d53939,#b92929);
- background: linear-gradient(top,#d53939,#b92929);
- }
- .button.yellow{
- border:1px solid #d2a000;
- box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
- background: -webkit-linear-gradient(top,#fece34,#d8a605);
- background: -moz-linear-gradient(top,#fece34,#d8a605);
- background: linear-gradient(top,#fece34,#d8a605);
- }
- .button.green{
- border:1px solid #64c878;
- box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
- background: -webkit-linear-gradient(top,#90dfa2,#84d494);
- background: -moz-linear-gradient(top,#90dfa2,#84d494);
- background: linear-gradient(top,#90dfa2,#84d494);
- }
- .button.blue{
- border:1px solid #1e7db9;
- box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
- background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
- background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
- background: linear-gradient(top,#42a4e0,#2e88c0);
- }
- .round,
- .side,
- .tags{
- padding-right: 30px;
- }
- .round:after{
- position: absolute;
- display: inline-block;
- content: "\003c";
- top:50%;
- right:10px;
- margin-top: -10px;
- width: 17px;
- height: 20px;
- padding-left: 3px;
- line-height:18px;
- font-size: 10px;
- font-weight: normal;
- border-radius: 10px;
- text-shadow:-2px 0 1px #333;
- -webkit-transform:rotate(-90deg);
- -moz-transform:rotate(-90deg);
- transform:rotate(-90deg);
- }
- .gray.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
- background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
- background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
- background:linear-gradient(top,#dce1e6,#dde2e7);
- text-shadow:-2px 0 1px #fff;
- }
- .black.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(0,0,0,.9);
- background:-webkit-linear-gradient(top,#333,#454545);
- background:-moz-linear-gradient(top,#333,#454545);
- background:linear-gradient(top,#333,#454545);
- }
- .red.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(130,25,25,.9);
- background:-webkit-linear-gradient(top,#b12222,#b42323);
- background:-moz-linear-gradient(top,#b12222,#b42323);
- background:linear-gradient(top,#b12222,#b42323);
- }
- .yellow.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(148,131,4,.9);
- background:-webkit-linear-gradient(top,#cf9d00,#d2a000);
- background:-moz-linear-gradient(top,#cf9d00,#d2a000);
- background:linear-gradient(top,#cf9d00,#d2a000);
- }
- .green.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(51,126,66,.9);
- background:-webkit-linear-gradient(top,#64c878,#6dcb80);
- background:-moz-linear-gradient(top,#64c878,#6dcb80);
- background:linear-gradient(top,#64c878,#6dcb80);
- }
- .blue.round:after{
- box-shadow:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(18,85,128,.9);
- background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);
- background:-moz-linear-gradient(top,#1e7db9,#2b85bd);
- background:linear-gradient(top,#1e7db9,#2b85bd);
- }
- .side:after{
- position: absolute;
- display: inline-block;
- content: "\00bb";
- top:3px;
- right:-4px;
- width: 38px;
- height:30px;
- font-weight: normal;
- line-height: 26px;
- border-radius:0 0 5px 5px;
- text-shadow:-2px 0 1px #333;
- -webkit-transform:rotate(-90deg);
- -moz-transform:rotate(-90deg);
- transform:rotate(-90deg);
- }
- .gray.side:after{
- text-shadow:-2px 0 1px #fff;
- border-top: 1px solid #d4d4d4;
- box-shadow:-2px 0 1px #eceef1 inset;
- background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
- background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
- background:linear-gradient(right,#e1e6ea,#f2f2f6 60%);
- }
- .black.side:after{
- border-top: 1px solid #222;
- box-shadow:-2px 0 1px #606060 inset;
- background:-webkit-linear-gradient(right,#373737,#555 60%);
- background:-moz-linear-gradient(right,#373737,#555 60%);
- background:linear-gradient(right,#373737,#555 60%);
- }
- .red.side:after{
- border-top: 1px solid #aa1e1e;
- box-shadow:-2px 0 1px #c75959 inset;
- background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
- background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
- background:linear-gradient(top,#b82929,#d73f3f 60%);
- }
- .yellow.side:after{
- border-top: 1px solid #ba8f06;
- box-shadow:-2px 0 1px #deb842 inset;
- background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
- background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
- background:linear-gradient(right,#d5a406,#fdc40b 60%);
- }
- .green.side:after{
- border-top: 1px solid #53b567;
- box-shadow:-2px 0 1px #8ad599 inset;
- background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
- background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
- background:linear-gradient(right,#69ca7c,#91e5a5 60%);
- }
- .blue.side:after{
- border-top: 1px solid #1971a8;
- box-shadow:-2px 0 1px #559dca inset;
- background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
- background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
- background:linear-gradient(right,#2482bd,#3fa2e0 60%);
- }
- .tags:after{
- font-weight: normal;
- position: absolute;
- display: inline-block;
- content: "FREE";
- top:-3px;
- right: -33px;
- color: #fff;
- text-shadow:none;
- width: 85px;
- height:25px;
- line-height: 28px;
- -webkit-transform:rotate(45deg) scale(.7,.7);
- -moz-transform:rotate(45deg) scale(.7,.7);
- transform:rotate(45deg) scale(.7,.7);
- }
- .gray.tags:after{
- background: #8c96a0;
- border:2px solid #fff;
- }
- .black.tags:after{
- background: #333;
- border:2px solid #777;
- }
- .red.tags:after{
- background: #b42323;
- border:2px solid #df4141;
- }
- .yellow.tags:after{
- background: #d2a000;
- border:2px solid #fcc100;
- }
- .green.tags:after{
- background: #64c878;
- border:2px solid #9bebac;
- }
- .blue.tags:after{
- background: #1e7db9;
- border:2px solid #54b1e9;
- }
- .button.rarrow,
- .button.larrow{
- overflow:visible;
- }
- .rarrow:after,
- .rarrow:before,
- .larrow:after,
- .larrow:before{
- position:absolute;
- content: "";
- display: block;
- width: 28px;
- height: 28px;
- -webkit-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- transform:rotate(45deg);
- }
- .rarrow:before{
- width: 27px;
- height: 27px;
- top: 6px;
- right: -13px;
- clip: rect(auto auto 26px 2px);
- }
- .rarrow:after{
- top: 6px;
- right: -12px;
- clip: rect(auto auto 26px 2px);
- }
- .gray.rarrow:before{
- background: #d6dbe0;
- }
- .gray.rarrow:after{
- box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
- background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
- background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
- background:linear-gradient(top left,#f2f3f7,#e4e8ec);
- }
- .black.rarrow:before{
- background: #333;
- }
- .black.rarrow:after{
- box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
- background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
- background:-moz-linear-gradient(top left,#656565,#4C4C4C);
- background:linear-gradient(top left,#656565,#4C4C4C);
- }
- .red.rarrow:before{
- background: #B42323;
- }
- .red.rarrow:after{
- box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
- background:-webkit-linear-gradient(top left,#D53939,#B92929);
- background:-moz-linear-gradient(top left,#D53939,#B92929);
- background:linear-gradient(top left,#D53939,#B92929);
- }
- .yellow.rarrow:before{
- background: #D2A000;
- }
- .yellow.rarrow:after{
- box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
- background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
- background:-moz-linear-gradient(top left,#FECE34,#D8A605);
- background:linear-gradient(top left,#FECE34,#D8A605);
- }
- .green.rarrow:before{
- background: #64C878;
- }
- .green.rarrow:after{
- box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
- background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
- background:-moz-linear-gradient(top left,#90DFA2,#84D494);
- background:linear-gradient(top left,#90DFA2,#84D494);
- }
- .blue.rarrow:before{
- background: #1E7DB9;
- }
- .blue.rarrow:after{
- box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
- background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
- background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
- background:linear-gradient(top left,#42A4E0,#2E88C0);
- }
- .larrow:before{
- top: 6px;
- left: -13px;
- width: 27px;
- height: 27px;
- clip: rect(2px 26px auto auto);
- }
- .larrow:after{
- top: 6px;
- left: -12px;
- clip: rect(2px 26px auto auto);
- }
- .gray.larrow:before{
- background: #d6dbe0;
- }
- .gray.larrow:after{
- box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
- background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
- background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
- background:linear-gradient(top left,#f2f3f7,#e4e8ec);
- }
- .black.larrow:before{
- background: #333;
- }
- .black.larrow:after{
- box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
- background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
- background:-moz-linear-gradient(top left,#656565,#4C4C4C);
- background:linear-gradient(top left,#656565,#4C4C4C);
- }
- .red.larrow:before{
- background: #B42323;
- }
- .red.larrow:after{
- box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
- background:-webkit-linear-gradient(top left,#D53939,#B92929);
- background:-moz-linear-gradient(top left,#D53939,#B92929);
- background:linear-gradient(top left,#D53939,#B92929);
- }
- .yellow.larrow:before{
- background: #D2A000;
- }
- .yellow.larrow:after{
- box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
- background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
- background:-moz-linear-gradient(top left,#FECE34,#D8A605);
- background:linear-gradient(top left,#FECE34,#D8A605);
- }
- .green.larrow:before{
- background: #64C878;
- }
- .green.larrow:after{
- box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
- background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
- background:-moz-linear-gradient(top left,#90DFA2,#84D494);
- background:linear-gradient(top left,#90DFA2,#84D494);
- }
- .blue.larrow:before{
- background: #1E7DB9;
- }
- .blue.larrow:after{
- box-shadow: 0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
- background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
- background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
- background:linear-gradient(top left,#42A4E0,#2E88C0);
- }
- .gray:hover{
- background: -webkit-linear-gradient(top,#fefefe,#ebeced);
- background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
- background: linear-gradient(top,#f2f3f7,#ebeced);
- }
- .black:hover{
- background: -webkit-linear-gradient(top,#818181,#575757);
- background: -moz-linear-gradient(top,#818181,#575757);
- background: linear-gradient(top,#818181,#575757);
- }
- .red:hover{
- background: -webkit-linear-gradient(top,#eb6f6f,#c83c3c);
- background: -moz-linear-gradient(top,#eb6f6f,#c83c3c);
- background: linear-gradient(top,#eb6f6f,#c83c3c);
- }
- .yellow:hover{
- background: -webkit-linear-gradient(top,#ffd859,#e3bb38);
- background: -moz-linear-gradient(top,#ffd859,#e3bb38);
- background: linear-gradient(top,#ffd859,#e3bb38);
- }
- .green:hover{
- background: -webkit-linear-gradient(top,#aaebb9,#82d392);
- background: -moz-linear-gradient(top,#aaebb9,#82d392);
- background: linear-gradient(top,#aaebb9,#82d392);
- }
- .blue:hover{
- background: -webkit-linear-gradient(top,#70bfef,#4097ce);
- background: -moz-linear-gradient(top,#70bfef,#4097ce);
- background: linear-gradient(top,#70bfef,#4097ce);
- }
- .gray:active{
- top:1px;
- box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
- background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
- background: linear-gradient(top,#e4e8ec,#e4e8ec);
- }
- .black:active{
- top:1px;
- box-shadow: 0 1px 3px #111 inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#424242,#575757);
- background: -moz-linear-gradient(top,#424242,#575757);
- background: linear-gradient(top,#424242,#575757);
- }
- .red:active{
- top:1px;
- box-shadow: 0 1px 3px #5b0505 inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#b11a1a,#bf2626);
- background: -moz-linear-gradient(top,#b11a1a,#bf2626);
- background: linear-gradient(top,#b11a1a,#bf2626);
- }
- .yellow:active{
- top:1px;
- box-shadow: 0 1px 3px #816b1f inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#d3a203,#dba907);
- background: -moz-linear-gradient(top,#d3a203,#dba907);
- background: linear-gradient(top,#d3a203,#dba907);
- }
- .green:active{
- top:1px;
- box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
- background: -moz-linear-gradient(top,#5eac6e,#72b37e);
- background: linear-gradient(top,#5eac6e,#72b37e);
- }
- .blue:active{
- top:1px;
- box-shadow: 0 1px 3px #114566 inset,0 3px 0 #fff;
- background: -webkit-linear-gradient(top,#1a71a8,#1976b1);
- background: -moz-linear-gradient(top,#1a71a8,#1976b1);
- background: linear-gradient(top,#1a71a8,#1976b1);
- }
- .gray.side:hover:after{
- background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
- background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
- background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
- }
- .black.side:hover:after{
- background:-webkit-linear-gradient(right,#555,#6f6f6f 60%);
- background:-moz-linear-gradient(right,#555,#6f6f6f 60%);
- background:linear-gradient(right,#555,#6f6f6f 60%);
- }
- .red.side:hover:after{
- background:-webkit-linear-gradient(right,#c43333,#dc4949 60%);
- background:-moz-linear-gradient(right,#c43333,#dc4949 60%);
- background:linear-gradient(right,#c43333,#dc4949 60%);
- }
- .yellow.side:hover:after{
- background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
- background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
- background:linear-gradient(right,#e1b21a,#fbc71d 60%);
- }
- .green.side:hover:after{
- background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
- background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
- background:linear-gradient(right,#85da95,#94e0a5 60%);
- }
- .blue.side:hover:after{
- background:-webkit-linear-gradient(right,#338fc8,#56b2eb 60%);
- background:-moz-linear-gradient(right,#338fc8,#56b2eb 60%);
- background:linear-gradient(right,#338fc8,#56b2eb 60%);
- }
- .gray.side:active:after{
- top:4px;
- border-top: 1px solid #9fa6ab;
- box-shadow:-1px 0 1px #a8abae inset;
- background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
- background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
- background:linear-gradient(right,#e4e8ec,#e4e8ec 60%);
- }
- .black.side:active:after{
- box-shadow:-1px 0 1px #111 inset;
- background:-webkit-linear-gradient(right,#414040,#4d4c4c 60%);
- background:-moz-linear-gradient(right,#414040,#4d4c4c 60%);
- background:linear-gradient(right,#414040,#4d4c4c 60%);
- }
- .red.side:active:after{
- box-shadow:-1px 0 1px #4b0707 inset;
- background:-webkit-linear-gradient(right,#b11a1a,#b11a1a 60%);
- background:-moz-linear-gradient(right,#b11a1a,#b11a1a 60%);
- background:linear-gradient(right,#b11a1a,#b11a1a 60%);
- }
- .yellow.side:active:after{
- box-shadow:-1px 0 1px #816b1f inset;
- background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
- background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
- background:linear-gradient(right,#d3a203,#dba907 60%);
- }
- .green.side:active:after{
- box-shadow:-1px 0 1px #33663d inset;
- background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
- background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
- background:linear-gradient(right,#63a870,#72b37e 60%);
- }
- .blue.side:active:after{
- box-shadow:-1px 0 1px #114566 inset;
- background:-webkit-linear-gradient(right,#1a71a8,#1976b1 60%);
- background:-moz-linear-gradient(right,#1a71a8,#1976b1 60%);
- background:linear-gradient(right,#1a71a8,#1976b1 60%);
- }
- .gray.rarrow:hover:after,
- .gray.rarrow:hover:after{
- background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
- background:-moz-linear-gradient(top left,#fefefe,#ebeced);
- background:linear-gradient(top left,#fefefe,#ebeced);
- }
- .black.rarrow:hover:after,
- .black.larrow:hover:after{
- background:-webkit-linear-gradient(top left,#818181,#575757);
- background:-moz-linear-gradient(top left,#818181,#575757);
- background:linear-gradient(top left,#818181,#575757);
- }
- .red.rarrow:hover:after,
- .red.larrow:hover:after{
- background:-webkit-linear-gradient(top left,#eb6f6f,#c83c3c);
- background:-moz-linear-gradient(top left,#eb6f6f,#c83c3c);
- background:linear-gradient(top left,#eb6f6f,#c83c3c);
- }
- .yellow.rarrow:hover:after,
- .yellow.larrow:hover:after{
- background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
- background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
- background:linear-gradient(top left,#ffd859,#e3bb38);
- }
- .green.rarrow:hover:after,
- .green.larrow:hover:after{
- background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
- background:-moz-linear-gradient(top left,#aaebb9,#82d392);
- background:linear-gradient(top left,#aaebb9,#82d392);
- }
- .blue.rarrow:hover:after,
- .blue.larrow:hover:after{
- background:-webkit-linear-gradient(top left,#70bfef,#4097ce);
- background:-moz-linear-gradient(top left,#70bfef,#4097ce);
- background:linear-gradient(top left,#70bfef,#4097ce);
- }
- .gray.rarrow:active:after,
- .gray.larrow:active:after{
- background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
- background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
- background:linear-gradient(top left,#e4e8ec,#e4e8ec);
- }
- .black.rarrow:active:after,
- .black.larrow:active:after{
- background:-webkit-linear-gradient(top left,#424242,#575757);
- background:-moz-linear-gradient(top left,#424242,#575757);
- background:linear-gradient(top left,#424242,#575757);
- }
- .red.rarrow:active:after,
- .red.larrow:active:after{
- background:-webkit-linear-gradient(top left,#b11a1a,#bf2626);
- background:-moz-linear-gradient(top left,#b11a1a,#bf2626);
- background:linear-gradient(top left,#b11a1a,#bf2626);
- }
- .yellow.rarrow:active:after,
- .yellow.larrow:active:after{
- background:-webkit-linear-gradient(top left,#d3a203,#dba907);
- background:-moz-linear-gradient(top left,#d3a203,#dba907);
- background:linear-gradient(top left,#d3a203,#dba907);
- }
- .green.rarrow:active:after,
- .green.larrow:active:after{
- background:-webkit-linear-gradient(top left,#63a870,#72b37e);
- background:-moz-linear-gradient(top left,#63a870,#72b37e);
- background:linear-gradient(top left,#63a870,#72b37e);
- }
- .blue.rarrow:active:after,
- .blue.larrow:active:after{
- background:-webkit-linear-gradient(top left,#1a71a8,#1976b1);
- background:-moz-linear-gradient(top left,#1a71a8,#1976b1);
- background:linear-gradient(top left,#1a71a8,#1976b1);
- }
- .gray.rarrow:active:after{
- box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
- }
- .gray.larrow:active:after{
- box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
- }
- .black.rarrow:active:after{
- box-shadow: 0 1px 0 #333 inset,-1px 0 0 #333 inset;
- }
- .black.larrow:active:after{
- box-shadow: 0 -1px 0 #333 inset,1px 0 0 #333 inset;
- }
- .red.rarrow:active:after{
- box-shadow: 0 1px 0 #640909 inset,-1px 0 0 #640909 inset;
- }
- .red.larrow:active:after{
- box-shadow: 0 -1px 0 #640909 inset,1px 0 0 #640909 inset;
- }
- .yellow.rarrow:active:after{
- box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
- }
- .yellow.larrow:active:after{
- box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
- }
- .green.rarrow:active:after{
- box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
- }
- .green.larrow:active:after{
- box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
- }
- .blue.rarrow:active:after{
- box-shadow: 0 1px 0 #114566 inset,-1px 0 0 #114566 inset;
- }
- .blue.larrow:active:after{
- box-shadow: 0 -1px 0 #114566 inset,1px 0 0 #114566 inset;
- }
- </style>
- </head>
- <body>
- <div class="page">
- <header id="header">
- <hgrounp class="white blank">
- <h1>36 Web Buttons Collection</h1>
- <h2>作者:藤藤(如有更好建议或疑问请加群:1041263)<h2>
- </hgrounp>
- </header>
- <section class="demo">
- <div class="demo_con">
- <button type="button" class="button gray">BUY NOW</button>
- <button type="button" class="button black">BUY NOW</button>
- <button type="button" class="button red">BUY NOW</button>
- <button type="button" class="button yellow">BUY NOW</button>
- <button type="button" class="button green">BUY NOW</button>
- <button type="button" class="button blue">BUY NOW</button>
- <button type="button" class="button gray round">DOWNLOAD</button>
- <button type="button" class="button black round">DOWNLOAD</button>
- <button type="button" class="button red round">DOWNLOAD</button>
- <button type="button" class="button yellow round">DOWNLOAD</button>
- <button type="button" class="button green round">DOWNLOAD</button>
- <button type="button" class="button blue round">DOWNLOAD</button>
- <button type="button" class="button gray side">DOWNLOAD</button>
- <button type="button" class="button black side">DOWNLOAD</button>
- <button type="button" class="button red side">DOWNLOAD</button>
- <button type="button" class="button yellow side">DOWNLOAD</button>
- <button type="button" class="button green side">DOWNLOAD</button>
- <button type="button" class="button blue side">DOWNLOAD</button>
- <button type="button" class="button gray tags">SIGN UP</button>
- <button type="button" class="button black tags">SIGN UP</button>
- <button type="button" class="button red tags">SIGN UP</button>
- <button type="button" class="button yellow tags">SIGN UP</button>
- <button type="button" class="button green tags">SIGN UP</button>
- <button type="button" class="button blue tags">SIGN UP</button>
- <button type="button" class="button gray rarrow">LEARN MORE</button>
- <button type="button" class="button black rarrow">LEARN MORE</button>
- <button type="button" class="button red rarrow">LEARN MORE</button>
- <button type="button" class="button yellow rarrow">LEARN MORE</button>
- <button type="button" class="button green rarrow">LEARN MORE</button>
- <button type="button" class="button blue rarrow">LEARN MORE</button>
- <button type="button" class="button gray larrow">GO BACK</button>
- <button type="button" class="button black larrow">GO BACK</button>
- <button type="button" class="button red larrow">GO BACK</button>
- <button type="button" class="button yellow larrow">GO BACK</button>
- <button type="button" class="button green larrow">GO BACK</button>
- <button type="button" class="button blue larrow">GO BACK</button>
- </div>
- </section>
- </div>
- </body>
- </html>
html转载
最新推荐文章于 2022-09-12 13:03:06 发布