最新消息:

CSS第2款:纯CSS的漂亮美观的按钮,只需要复制代码按钮即可产生

CSS模块 杨红伟 1649浏览 0评论

一、介绍

描述:很多时间,我们做按钮时,需要用到图片,这里我们只需要用CSS就可以办到。当用户只需要复制代码,一个漂亮的“提交”按钮便可以产生!当然“提交“两个字,你也可以用其他字来代替了!

兼容:IE6-9/Firefox/Google Chrome

二、使用教程

HTML代码如下:

<input type="button" class="sub_btn" value="提交"/>

CSS代码如下:

.sub_btn {
        position:absolute; left:100px; top:100px;  //这里是调节位置的
width:86px;height:30px;  //需要说明的是,这里指定宽高的话,才会兼容,否则IE6和IE7就会变形
        display: inline-block;
        zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
        *display: inline;
        vertical-align: baseline;
        margin: 0 2px;
        outline: none;
        cursor: pointer;
        text-align: center;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.6);
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        color: #e8f0de;
        border: solid 1px #538312;
        background: #64991e;
        background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
        background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.sub_btn:hover {
        background: #538018;
        background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
        background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址