• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 表单按钮 >  纯css3打造能够弹起和正文

纯css3打造能够弹起和按下的按钮,css3按钮代码

作者:网页模板
大小:0MB
点击次数:
发布时间:2014-03-06 13:31
分享到:

特效介绍

纯css3打造能够弹起和按下的按钮,css3按钮代码。适用浏览器:360极速浏览器、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗极速,不支持IE8及以下浏览器。


提示:您可以先修改部分代码再运行

使用方法

第一步、在head区域引入下面的代码
<style>
    a.button {
        position: relative;
        color: rgba(255,255,255,1);
        text-decoration: none;
        background-color: rgba(219,87,5,1);
        font-family: 'Yanone Kaffeesatz';
        font-weight: 700;
        font-size: 3em;
        display: block;
        padding: 4px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
        -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
        box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
        margin: 100px auto;
        width: 160px;
        text-align: center;
        
        -webkit-transition: all .1s ease;
        -moz-transition: all .1s ease;
        -ms-transition: all .1s ease;
        -o-transition: all .1s ease;
        transition: all .1s ease;
    }

    a.button:active {
        -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
        -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
        box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
        position: relative;
        top: 6px;
    }
</style>
第二步、将下面的代码放到需要显示的地方
<a href="javascript:void(0);" class="button">点击我</a>
  • 本文标签:
  • css3按钮代码
仿stargame忘记密码的jquery表单验证
简单的js表单验证代码