首页 > 特效插件 > 表单按钮 >  纯css3打造能够弹起和按下的按钮,css3按钮代码正文

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

特效介绍
纯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>