Кнопки css примеры

Кнопки css - большая подборка из 142 анимированных кнопок в примерах, выполненных только на css.

Кнопки css имеют классные эффекты при нажатии и наведении. Красивая анимация кнопок будет стильно отображаться на странице html.

Для удобства все кнопки снабжены кодом css, - нажмите на любую из них, скопируйте код css эффект кнопки и сразу вставьте её к себе на страницу.

Нажмите на кнопку, чтобы получить код CSS.

Кнопка

<style type="text/css">
 .tesuen_z{padding:6px 20px;position:relative;text-decoration:none;color:#fff;text-shadow:0 1px 1px #555;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;cursor: pointer;}
 .tesuen_z{background-color:#709e0e;background-image:linear-gradient(bottom, #88c72a 0%, #709e0e 100%);background-image:-o-linear-gradient(bottom, #88c72a 0%, #709e0e 100%);background-image:-moz-linear-gradient(bottom, #88c72a 0%, #709e0e 100%);background-image:-webkit-linear-gradient(bottom, #88c72a 0%, #709e0e 100%);background-image:-ms-linear-gradient(bottom, #88c72a 0%, #709e0e 100%);background-image:-webkit-gradient( linear, center bottom, center top, color-stop(0, #88c72a), color-stop(1, #709e0e));-webkit-box-shadow:0 6px 0 #3a7900;-moz-box-shadow:0 6px 0 #3a7900;-o-box-shadow:0 6px 0 #3a7900;box-shadow:0 6px 0 #3a7900;}
 .tesuen_z::before {content:"";display:block;position:absolute;width:100%;height:100%;left:-2px;right:-2px;top:5px;padding-left:2px;padding-right:2px;padding-bottom:4px;z-index:-1;-webkit-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 0 #fff;-moz-box-shadow:0 1px 0 #fff;-o-box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 #fff;}
 .tesuen_z::before{background-color:#0c3a00;}
 .tesuen_z:active{background-color:#67910b;background-image:linear-gradient(top, #67910b 0%, #7fb52f 100%);background-image:-o-linear-gradient(top, #67910b 0%, #7fb52f 100%);background-image:-moz-linear-gradient(top, #67910b 0%, #7fb52f 100%);background-image:-webkit-linear-gradient(top, #67910b 0%, #7fb52f 100%);background-image:-ms-linear-gradient(top, #67910b 0%, #7fb52f 100%);background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #67910b), color-stop(1, #7fb52f));-webkit-box-shadow:0 1px 0 #b2f154 inset, 0 -1px 0 #1f4d03 inset;-moz-box-shadow:0 1px 0 #b2f154 inset, 0 -1px 0 #1f4d03 inset;-o-box-shadow:0 1px 0 #b2f154 inset, 0 -1px 0 #1f4d03 inset;box-shadow:0 1px 0 #b2f154 inset, 0 -1px 0 #1f4d03 inset;top:7px;}
 .tesuen_z:active::before{top:-2px;}
 .tesuen_z:active,.tesuen_z:hover,.tesuen_z:focus{color:#fff;text-shadow:0 1px 2px #333;}
</style>

<a href="#" class="tesuen_z">Кнопка</a>

Кнопка

<style type="text/css">
 .tesuen_r{padding:6px 20px;position:relative;text-decoration:none;color:#fff;text-shadow:0 1px 1px #555;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;cursor: pointer;}
 .tesuen_r{background-color:#a91919;background-image:linear-gradient(bottom, #d93c3c 0%, #a91919 100%);background-image:-o-linear-gradient(bottom, #d93c3c 0%, #a91919 100%);background-image:-moz-linear-gradient(bottom, #d93c3c 0%, #a91919 100%);background-image:-webkit-linear-gradient(bottom, #d93c3c 0%, #a91919 100%);background-image:-ms-linear-gradient(bottom, #d93c3c 0%, #a91919 100%);background-image:-webkit-gradient( linear, center bottom, center top, color-stop(0, #d93c3c), color-stop(1, #a91919));-webkit-box-shadow:0 6px 0 #890c0c;-moz-box-shadow:0 6px 0 #890c0c;-o-box-shadow:0 6px 0 #890c0c;box-shadow:0 6px 0 #890c0c;}
 .tesuen_r::before {content:"";display:block;position:absolute;width:100%;height:100%;left:-2px;right:-2px;top:5px;padding-left:2px;padding-right:2px;padding-bottom:4px;z-index:-1;-webkit-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 1px 0 #fff;-moz-box-shadow:0 1px 0 #fff;-o-box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 #fff;}
 .tesuen_r::before{background-color:#340000;}
 .tesuen_r:active{background-color:#9e0e0e;background-image:linear-gradient(top, #9e0e0e 0%, #c72a2a 100%);background-image:-o-linear-gradient(top, #9e0e0e 0%, #c72a2a 100%);background-image:-moz-linear-gradient(top, #9e0e0e 0%, #c72a2a 100%);background-image:-webkit-linear-gradient(top, #9e0e0e 0%, #c72a2a 100%);background-image:-ms-linear-gradient(top, #9e0e0e 0%, #c72a2a 100%);background-image:-webkit-gradient( linear, left top, left bottom, color-stop(0, #9e0e0e), color-stop(1, #c72a2a));-webkit-box-shadow:0 1px 0 #ff9494 inset, 0 -1px 0 #9e0e0e inset;-moz-box-shadow:0 1px 0 #ff9494 inset, 0 -1px 0 #9e0e0e inset;-o-box-shadow:0 1px 0 #ff9494 inset, 0 -1px 0 #9e0e0e inset;box-shadow:0 1px 0 #ff9494 inset, 0 -1px 0 #9e0e0e inset;top:7px;}
 .tesuen_r:active::before{top:-2px;}
 .tesuen_r:active,.tesuen_r:hover,.tesuen_r:focus{color:#fff;text-shadow:0 1px 2px #333;}
</style>

<a href="#" class="tesuen_r">Кнопка</a>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_2{background-color:#3bb3e0;text-decoration:none;color:#fff;position:relative;padding:10px 30px;border-left:solid 1px #2ab7ec;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-o-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-moz-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-webkit-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-ms-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-webkit-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;-o-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;transition:none;}
 .tesuen_2:active{top:3px;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;-o-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;}
 .tesuen_2::before{background-color:#2561b4;content:"1";width:35px;height:100%;max-height:31px;position:absolute;display:block;padding-top:8px;top:0px;left:-36px;font-size:18px;font-weight:bold;color:#8fd1ea;text-shadow:1px 1px 0px #07526e;border-right:solid 1px #07526e;background-image:linear-gradient(to top, #0a5e7d 0%, #0e8bb8 100%);background-image:-o-linear-gradient(to top, #0a5e7d 0%, #0e8bb8 100%);background-image:-moz-linear-gradient(to top, #0a5e7d 0%, #0e8bb8 100%);background-image:-webkit-linear-gradient(to top, #0a5e7d 0%, #0e8bb8 100%);background-image:-ms-linear-gradient(to top, #0a5e7d 0%, #0e8bb8 100%);-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-webkit-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #032b3a, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #032b3a, 0 10px 5px #999;-o-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #032b3a, 0 10px 5px #999;box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #032b3a, 0 10px 5px #999;}
 .tesuen_2:active::before{top:-3px;-webkit-box-shadow:0 1px 0 #21aee3 inset, 0 5px 0 0 #032b3a, 1px 1px 0 0 #367c96, 2px 2px 0 0 #4d93ad, 2px 5px 0 0 #044a64, 6px 4px 2px #066486, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #21aee3 inset, 0 5px 0 0 #032b3a, 1px 1px 0 0 #367c96, 2px 2px 0 0 #4d93ad, 2px 5px 0 0 #044a64, 6px 4px 2px #066486, 0 10px 5px #999;-o-box-shadow:0 1px 0 #21aee3 inset, 0 5px 0 0 #032b3a, 1px 1px 0 0 #367c96, 2px 2px 0 0 #4d93ad, 2px 5px 0 0 #044a64, 6px 4px 2px #066486, 0 10px 5px #999;box-shadow:0 1px 0 #21aee3 inset, 0 5px 0 0 #032b3a, 1px 1px 0 0 #367c96, 2px 2px 0 0 #4d93ad, 2px 5px 0 0 #044a64, 6px 4px 2px #066486, 0 10px 5px #999;}
</style>

<div class="avd_div"><a href="#" class="tesuen_2">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_2_z{background-color:#5b9a46;text-decoration:none;color:#fff;position:relative;padding:10px 30px;border-left:solid 1px #709e0e;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-o-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-moz-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-webkit-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-ms-linear-gradient(to top, #709e0e 0%, #88c72a 100%);-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-webkit-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;-o-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;transition:none;}
 .tesuen_2_z:active{top:3px;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;-o-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;}
 .tesuen_2_z::before{background-color:#5b9a46;content:"1";width:35px;height:100%;max-height:31px;position:absolute;display:block;padding-top:8px;top:0px;left:-36px;font-size:18px;font-weight:bold;color:#abea96;text-shadow:1px 1px 0px #155400;border-right:solid 1px #155400;background-image:linear-gradient(to top, #155400 0%, #6fae11 100%);background-image:-o-linear-gradient(to top, #155400 0%, #6fae11 100%);background-image:-moz-linear-gradient(to top, #155400 0%, #6fae11 100%);background-image:-webkit-linear-gradient(to top, #155400 0%, #6fae11 100%);background-image:-ms-linear-gradient(to top, #155400 0%, #6fae11 100%);-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-webkit-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 0 10px 5px #999;-o-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 0 10px 5px #999;box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 0 10px 5px #999;}
 .tesuen_2_z:active::before{top:-3px;-webkit-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 1px 1px 0 0 #2c6b00, 2px 2px 0 0 #559429, 2px 5px 0 0 #2c6b00, 6px 4px 2px #246307, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 1px 1px 0 0 #2c6b00, 2px 2px 0 0 #559429, 2px 5px 0 0 #2c6b00, 6px 4px 2px #246307, 0 10px 5px #999;-o-box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 1px 1px 0 0 #2c6b00, 2px 2px 0 0 #559429, 2px 5px 0 0 #2c6b00, 6px 4px 2px #246307, 0 10px 5px #999;box-shadow:0 1px 0 #5b9a46 inset, 0 5px 0 0 #003d00, 1px 1px 0 0 #2c6b00, 2px 2px 0 0 #559429, 2px 5px 0 0 #2c6b00, 6px 4px 2px #246307, 0 10px 5px #999;}
 .sec_but::before{content:"2";}
</style>

<div class="avd_div"><a href="#" class="tesuen_2_z sec_but">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_2_r{background-color:#9e0e0e;text-decoration:none;color:#fff;position:relative;padding:10px 30px;border-left:solid 1px #b92929;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #9e0e0e 0%, #c72a2a 100%);background-image:-o-linear-gradient(to top, #9e0e0e 0%, #c72a2a 100%);background-image:-moz-linear-gradient(to top, #9e0e0e 0%, #c72a2a 100%);background-image:-webkit-linear-gradient(to top, #9e0e0e 0%, #c72a2a 100%);background-image:-ms-linear-gradient(to top, #9e0e0e 0%, #c72a2a 100%);-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-webkit-box-shadow:0 1px 0 #9e0e0e inset, 0 5px 0 0 #740000, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #9e0e0e inset, 0 5px 0 0 #740000, 0 10px 5px #999;-o-box-shadow:0 1px 0 #9e0e0e inset, 0 5px 0 0 #740000, 0 10px 5px #999;box-shadow:0 1px 0 #9e0e0e inset, 0 5px 0 0 #740000, 0 10px 5px #999;transition:none;}
 .tesuen_2_r:active{top:3px;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;-o-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;}
 .tesuen_2_r::before{background-color:#9e0e0e;content:"1";width:35px;height:100%;max-height:31px;position:absolute;display:block;padding-top:8px;top:0px;left:-36px;font-size:18px;font-weight:bold;color:#ffc4c4;text-shadow:1px 1px 0px #430000;border-right:solid 1px #6e0000;background-image:linear-gradient(to top, #680000 0%, #a91919 100%);background-image:-o-linear-gradient(to top, #680000 0%, #a91919 100%);background-image:-moz-linear-gradient(to top, #680000 0%, #a91919 100%);background-image:-webkit-linear-gradient(to top, #680000 0%, #a91919 100%);background-image:-ms-linear-gradient(to top, #680000 0%, #a91919 100%);-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-webkit-box-shadow:0 1px 0 #ad5454 inset, 0 5px 0 0 #3b0000, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #ad5454 inset, 0 5px 0 0 #3b0000, 0 10px 5px #999;-o-box-shadow:0 1px 0 #ad5454 inset, 0 5px 0 0 #3b0000, 0 10px 5px #999;box-shadow:0 1px 0 #ad5454 inset, 0 5px 0 0 #3b0000, 0 10px 5px #999;}
 .tesuen_2_r:active::before{top:-3px;-webkit-box-shadow:0 1px 0 #df4f4f inset, 0 5px 0 0 #3b0000, 1px 1px 0 0 #bc3838, 2px 2px 0 0 #816767, 2px 5px 0 0 #8f0000, 6px 4px 2px #660e0e, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #df4f4f inset, 0 5px 0 0 #3b0000, 1px 1px 0 0 #bc3838, 2px 2px 0 0 #816767, 2px 5px 0 0 #8f0000, 6px 4px 2px #660e0e, 0 10px 5px #999;-o-box-shadow:0 1px 0 #df4f4f inset, 0 5px 0 0 #3b0000, 1px 1px 0 0 #bc3838, 2px 2px 0 0 #816767, 2px 5px 0 0 #8f0000, 6px 4px 2px #660e0e, 0 10px 5px #999;box-shadow:0 1px 0 #df4f4f inset, 0 5px 0 0 #3b0000, 1px 1px 0 0 #bc3838, 2px 2px 0 0 #816767, 2px 5px 0 0 #8f0000, 6px 4px 2px #660e0e, 0 10px 5px #999;}
 .third_but::before{content:"3";}
</style>

<div class="avd_div"><a href="#" class="tesuen_2_r third_but">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_3{background-color:#3bb3e0;text-decoration:none;color:#fff;font-size:18px;font-weight:bold;position:relative;padding:10px 50px 10px 20px;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-o-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-moz-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-webkit-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);background-image:-ms-linear-gradient(to top, #2ca0ca 0%, #3eb8e5 100%);-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;-o-box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;box-shadow:0 1px 0 #2ab7ec inset, 0 5px 0 0 #156785, 0 10px 5px #999;transition:none;}
 .tesuen_3:active{top:3px;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;-o-box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;box-shadow:0 1px 0 #2ab7ec inset, 0 2px 0 0 #156785, 0 5px 3px #999;}
 .tesuen_3::before{background-color:#2591b4;background-image:url("https://age-dragon.com/admin/images/right_arrow.png");background-repeat:no-repeat;background-position:center center;content:"";width:20px;height:20px;position:absolute;right:15px;top:50%;text-shadow:1px 1px 0px #430000;margin-top:-9px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 1px 0 #052756 inset, 0 1px 0 #60c9f0;-moz-box-shadow:0 1px 0 #052756 inset, 0 1px 0 #60c9f0;-o-box-shadow:0 1px 0 #052756 inset, 0 1px 0 #60c9f0;box-shadow:0 1px 0 #052756 inset, 0 1px 0 #60c9f0;}
 .tesuen_3:active::before{top:50%;margin-top:-12px;-webkit-box-shadow:0 1px 0 #60c9f0 inset, 0 3px 0 #0e3871, 0 6px 3px #1a80a6;-moz-box-shadow:0 1px 0 #60c9f0 inset, 0 3px 0 #0e3871, 0 6px 3px #1a80a6;-o-box-shadow:0 1px 0 #60c9f0 inset, 0 3px 0 #0e3871, 0 6px 3px #1a80a6;box-shadow:0 1px 0 #60c9f0 inset, 0 3px 0 #0e3871, 0 6px 3px #1a80a6;}
</style>

<div class="avd_div"><a href="#" class="tesuen_3">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_3_z{background-color:#3bb3e0;text-decoration:none;color:#fff;font-size:18px;font-weight:bold;position:relative;padding:10px 50px 10px 20px;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-o-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-moz-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-webkit-linear-gradient(to top, #709e0e 0%, #88c72a 100%);background-image:-ms-linear-gradient(to top, #709e0e 0%, #88c72a 100%);-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;-o-box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;box-shadow:0 1px 0 #8cba2a inset, 0 5px 0 0 #347300, 0 10px 5px #999;transition:none;}
 .tesuen_3_z:active{top:3px;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;-o-box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;box-shadow:0 1px 0 #549332 inset, 0 2px 0 0 #458403, 0 5px 3px #999;}
 .tesuen_3_z::before{background-color:#619200;background-image:url("https://age-dragon.com/admin/images/right_arrow.png");background-repeat:no-repeat;background-position:center center;content:"";width:20px;height:20px;position:absolute;right:15px;top:50%;text-shadow:1px 1px 0px #430000;margin-top:-9px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 1px 0 #003900 inset, 0 1px 0 #8dcc3c;-moz-box-shadow:0 1px 0 #003900 inset, 0 1px 0 #8dcc3c;-o-box-shadow:0 1px 0 #003900 inset, 0 1px 0 #8dcc3c;box-shadow:0 1px 0 #003900 inset, 0 1px 0 #8dcc3c;}
 .tesuen_3_z:active::before{top:50%;margin-top:-12px;-webkit-box-shadow:0 1px 0 #89c838 inset, 0 3px 0 #226103, 0 6px 3px #3e7d00;-moz-box-shadow:0 1px 0 #89c838 inset, 0 3px 0 #226103, 0 6px 3px #3e7d00;-o-box-shadow:0 1px 0 #89c838 inset, 0 3px 0 #226103, 0 6px 3px #3e7d00;box-shadow:0 1px 0 #89c838 inset, 0 3px 0 #226103, 0 6px 3px #3e7d00;}
</style>

<div class="avd_div"><a href="#" class="tesuen_3_z">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .tesuen_3_r{background-color:#9e0e0e;text-decoration:none;color:#fff;font-size:18px;font-weight:bold;position:relative;padding:10px 50px 10px 20px;text-shadow:0 1px 1px #555;background-image:linear-gradient(to top, #9e0e0e 0%, #d63939 100%);background-image:-o-linear-gradient(to top, #9e0e0e 0%, #d63939 100%);background-image:-moz-linear-gradient(to top, #9e0e0e 0%, #d63939 100%);background-image:-webkit-linear-gradient(to top, #9e0e0e 0%, #d63939 100%);background-image:-ms-linear-gradient(to top, #9e0e0e 0%, #d63939 100%);-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 0 #ab1f1f inset, 0 5px 0 0 #740000, 0 10px 5px #999;-moz-box-shadow:0 1px 0 #ab1f1f inset, 0 5px 0 0 #740000, 0 10px 5px #999;-o-box-shadow:0 1px 0 #ab1f1f inset, 0 5px 0 0 #740000, 0 10px 5px #999;box-shadow:0 1px 0 #ab1f1f inset, 0 5px 0 0 #740000, 0 10px 5px #999;transition:none;}
 .tesuen_3_r:active{top:3px;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;-moz-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;-o-box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;box-shadow:0 1px 0 #9e0e0e inset, 0 2px 0 0 #6b0101, 0 5px 3px #999;}
 .tesuen_3_r::before{background-color:#9d0d0d;background-image:url("https://age-dragon.com/admin/images/right_arrow.png");background-repeat:no-repeat;background-position:center center;content:"";width:20px;height:20px;position:absolute;right:15px;top:50%;text-shadow:1px 1px 0px #430000;margin-top:-9px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 1px 0 #490000 inset, 0 1px 0 #d73a3a;-moz-box-shadow:0 1px 0 #490000 inset, 0 1px 0 #d73a3a;-o-box-shadow:0 1px 0 #490000 inset, 0 1px 0 #d73a3a;box-shadow:0 1px 0 #490000 inset, 0 1px 0 #d73a3a;}
 .tesuen_3_r:active::before{top:50%;margin-top:-12px;-webkit-box-shadow:0 1px 0 #d87d7d inset, 0 3px 0 #5e0000, 0 6px 3px #790000;-moz-box-shadow:0 1px 0 #d87d7d inset, 0 3px 0 #5e0000, 0 6px 3px #790000;-o-box-shadow:0 1px 0 #d87d7d inset, 0 3px 0 #5e0000, 0 6px 3px #790000;box-shadow:0 1px 0 #d87d7d inset, 0 3px 0 #5e0000, 0 6px 3px #790000;}
</style>

<div class="avd_div"><a href="#" class="tesuen_3_r">Кнопка</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 35px;-moz-border-radius:5px 5px 35px 35px;-o-border-radius:5px 5px 35px 35px;border-radius:5px 5px 35px 35px;}
 .but_sad:hover{-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .but_sad:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .blue_sad{background-color:#2ca0ca;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;}
 .blue_sad:hover{-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .blue_sad:active{-webkit-box-shadow:0 2px 2px #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad blue_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 35px;-moz-border-radius:5px 5px 35px 35px;-o-border-radius:5px 5px 35px 35px;border-radius:5px 5px 35px 35px;}
 .but_sad:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .green_sad{background-color:#519000;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:hover{-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:active{-webkit-box-shadow:0 2px 2px #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad green_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 35px;-moz-border-radius:5px 5px 35px 35px;-o-border-radius:5px 5px 35px 35px;border-radius:5px 5px 35px 35px;}
 .but_sad:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .red_sad{background-color:#9e0e0e;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .red_sad:hover{-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .red_sad:active{-webkit-box-shadow:0 2px 2px #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad red_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_xb{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 35px 5px 5px;-moz-border-radius:35px 35px 5px 5px;-o-border-radius:35px 35px 5px 5px;border-radius:35px 35px 5px 5px;}
 .but_sad_xb:hover{-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .but_sad_xb:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .blue_sad{background-color:#2ca0ca;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;}
 .blue_sad:hover{-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .blue_sad:active{-webkit-box-shadow:0 2px 2px #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_xb blue_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_xz{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 35px 5px 5px;-moz-border-radius:35px 35px 5px 5px;-o-border-radius:35px 35px 5px 5px;border-radius:35px 35px 5px 5px;}
 .but_sad_xz:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .green_sad{background-color:#519000;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:hover{-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:active{-webkit-box-shadow:0 2px 2px #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_xz green_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_xr{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 35px 5px 5px;-moz-border-radius:35px 35px 5px 5px;-o-border-radius:35px 35px 5px 5px;border-radius:35px 35px 5px 5px;}
 .but_sad_xr:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .red_sad{background-color:#9e0e0e;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .red_sad:hover{-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .red_sad:active{-webkit-box-shadow:0 2px 2px #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_xr red_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_s{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:10px / 35px;-moz-border-radius:10px / 35px;-o-border-radius:10px / 35px;border-radius:10px / 35px;}
 .but_sad_s:hover{-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .but_sad_s:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .blue_sad{background-color:#2ca0ca;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;}
 .blue_sad:hover{-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .blue_sad:active{-webkit-box-shadow:0 2px 2px #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_s blue_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_g{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:10px / 35px;-moz-border-radius:10px / 35px;-o-border-radius:10px / 35px;border-radius:10px / 35px;}
 .but_sad_g:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .green_sad{background-color:#519000;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:hover{-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:active{-webkit-box-shadow:0 2px 2px #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_g green_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_r{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:10px / 35px;-moz-border-radius:10px / 35px;-o-border-radius:10px / 35px;border-radius:10px / 35px;}
 .but_sad_r:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .red_sad{background-color:#9e0e0e;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .red_sad:hover{-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .red_sad:active{-webkit-box-shadow:0 2px 2px #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_r red_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_s_2{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 5px;-moz-border-radius:35px 5px;-o-border-radius:35px 5px;border-radius:35px 5px;}
 .but_sad_s_2:hover{-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .but_sad_s_2:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .blue_sad{background-color:#2ca0ca;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;}
 .blue_sad:hover{-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .blue_sad:active{-webkit-box-shadow:0 2px 2px #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_s_2 blue_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_g_2{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 5px;-moz-border-radius:35px 5px;-o-border-radius:35px 5px;border-radius:35px 5px;}
 .but_sad_g_2:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .green_sad{background-color:#519000;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:hover{-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:active{-webkit-box-shadow:0 2px 2px #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_g_2 green_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_r_2{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:35px 5px;-moz-border-radius:35px 5px;-o-border-radius:35px 5px;border-radius:35px 5px;}
 .but_sad_r_2:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .red_sad{background-color:#9e0e0e;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .red_sad:hover{-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .red_sad:active{-webkit-box-shadow:0 2px 2px #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_r_2 red_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_s_3{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 5px;-moz-border-radius:5px 5px 35px 5px;-o-border-radius:5px 5px 35px 5px;border-radius:5px 5px 35px 5px;}
 .but_sad_s_3:hover{-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .but_sad_s_3:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .blue_sad{background-color:#2ca0ca;background-image:linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-o-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-moz-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-webkit-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);background-image:-ms-linear-gradient(to top, #3eb8e5 0%, #2ca0ca 100%);-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;}
 .blue_sad:hover{-webkit-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #267896, 0 9px 0 #156785, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .blue_sad:active{-webkit-box-shadow:0 2px 2px #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_s_3 blue_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_g_3{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 5px;-moz-border-radius:5px 5px 35px 5px;-o-border-radius:5px 5px 35px 5px;border-radius:5px 5px 35px 5px;}
 .but_sad_g_3:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .green_sad{background-color:#519000;background-image:linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-o-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-moz-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-webkit-linear-gradient(to top, #84c333 0%, #519000 100%);background-image:-ms-linear-gradient(to top, #84c333 0%, #519000 100%);-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0 9px 10px rgba(0,0,0,0.4), 0 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:hover{-webkit-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .green_sad:active{-webkit-box-shadow:0 2px 2px #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_g_3 green_sad">Жми на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .but_sad_r_3{text-decoration:none;color:#fff;padding:12px 20px;font-size:18px;font-weight:bold;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 9px rgba(255,255,255,0.2) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;position:relative;border-bottom:1px solid rgba(255,255,255,0.2);text-shadow:0 1px 1px #555;-webkit-border-radius:5px 5px 35px 5px;-moz-border-radius:5px 5px 35px 5px;-o-border-radius:5px 5px 35px 5px;border-radius:5px 5px 35px 5px;}
 .but_sad_r_3:active{top:7px;box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
 .red_sad{background-color:#9e0e0e;background-image:linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-o-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-moz-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-webkit-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);background-image:-ms-linear-gradient(to top, #c72a2a 0%, #9e0e0e 100%);-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);}
 .red_sad:hover{-webkit-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;-o-box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;box-shadow:0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), 0px 2px 15px rgba(255,255,255,0.4) inset, 0 -2px 9px rgba(0,0,0,0.2) inset;}
 .red_sad:active{-webkit-box-shadow:0 2px 2px #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;-o-box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;box-shadow:0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), 0px 2px 5px rgba(0,0,0,0.2) inset;}
</style>

<div class="avd_div"><a href="#" class="but_sad_r_3 red_sad">Жми на кнопку</a></div>

Нажмите на кнопку, чтобы получить код CSS.

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_4s{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;perspective-origin:center top;-webkit-perspective-origin:center top;-moz-perspective-origin:center top;}
 .wsa_4s div{border:1px solid #188cb6;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_4s div:nth-child(1){color:#188cb6;background-color:#fff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_4s div:nth-child(2){background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );color:#fff;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;}
 .wsa_4s:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;background-color:rgba(0, 0, 0, 0.5);}
 .wsa_4s:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_4s div a{color:#188cb6;text-decoration:none;}
 .wsa_4s:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_4s"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_4z{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;perspective-origin:center top;-webkit-perspective-origin:center top;-moz-perspective-origin:center top;}
 .wsa_4z div{border:1px solid #488700;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_4z div:nth-child(1){color:#488700;background-color:#fff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_4z div:nth-child(2){background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );color:#fff;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;}
 .wsa_4z:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;background-color:rgba(0, 0, 0, 0.5);}
 .wsa_4z:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_4z div a{color:#488700;text-decoration:none;}
 .wsa_4z:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_4z"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_4r{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;perspective-origin:center top;-webkit-perspective-origin:center top;-moz-perspective-origin:center top;}
 .wsa_4r div{border:1px solid #9e0e0e;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_4r div:nth-child(1){color:#9e0e0e;background-color:#fff;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_4r div:nth-child(2){background-color:#800000;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );color:#fff;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;}
 .wsa_4r:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;background-color:rgba(0, 0, 0, 0.5);}
 .wsa_4r:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_4r div a{color:#800000;text-decoration:none;}
 .wsa_4r:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_4r"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .preserve-3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_s{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;}
 .wsa_s div{color:#00749e;border:1px solid #188cb6;padding:5px;background-color:#fff;position:absolute;width:100%;height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_s:hover div{color:#fff;background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );animation:wsa_s 0.3s ease-out;-webkit-animation:wsa_s 0.3s ease-out;-moz-animation:wsa_s 0.3s ease-out;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;}
 .wsa_s div a{color:#00749e;text-decoration:none;}
 .wsa_s:hover div a{color:#fff;}
 @-webkit-keyframes wsa_s{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#00749e;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#188cb6;color:#00749e;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(top, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );color:#fff;}}
 @-moz-keyframes wsa_s{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#00749e;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#188cb6;color:#00749e;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );color:#fff;}}
</style>

<div class="warges"><div class="knopka_avd wsa_s"><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .preserve-3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_z{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;}
 .wsa_z div{color:#488700;border:1px solid #488700;padding:5px;background-color:#fff;position:absolute;width:100%;height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_z:hover div{color:#fff;background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );animation:wsa_z 0.3s ease-out;-webkit-animation:wsa_z 0.3s ease-out;-moz-animation:wsa_z 0.3s ease-out;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;}
 .wsa_z div a{color:#488700;text-decoration:none;}
 .wsa_z:hover div a{color:#fff;}
 @-webkit-keyframes wsa_z{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#488700;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#488700;color:#488700;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(top, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );color:#fff;}}
 @-moz-keyframes wsa_z{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#488700;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#488700;color:#488700;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );color:#fff;}}
</style>

<div class="warges"><div class="knopka_avd wsa_z"><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .preserve-3d{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_r{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;}
 .wsa_r div{color:#9e0e0e;border:1px solid #9e0e0e;padding:5px;background-color:#fff;position:absolute;width:100%;height:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_r:hover div{color:#fff;background-color:#d33636;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );animation:wsa_r 0.3s ease-out;-webkit-animation:wsa_r 0.3s ease-out;-moz-animation:wsa_r 0.3s ease-out;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;}
 .wsa_r div a{color:#9e0e0e;text-decoration:none;}
 .wsa_r:hover div a{color:#fff;}
 @-webkit-keyframes wsa_r{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#9e0e0e;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#9e0e0e;color:#9e0e0e;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#9e0e0e;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#9e0e0e;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(top, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );color:#fff;}}
 @-moz-keyframes wsa_r{from{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#fff;color:#9e0e0e;}49.99%{transform:translateZ(100px) rotateX(90deg);-webkit-transform:translateZ(100px) rotateX(90deg);-moz-transform:translateZ(100px) rotateX(90deg);background-color:#9e0e0e;color:#9e0e0e;}50.00%{transform:translateZ(100px) rotateX(-90deg);-webkit-transform:translateZ(100px) rotateX(-90deg);-moz-transform:translateZ(100px) rotateX(-90deg);background-color:#9e0e0e;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );color:#808080;}to{transform:translateZ(0px) rotateX(0deg);-webkit-transform:translateZ(0px) rotateX(0deg);-moz-transform:translateZ(0px) rotateX(0deg);background-color:#9e0e0e;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left bottom, left top, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );color:#fff;}}
</style>

<div class="warges"><div class="knopka_avd wsa_r"><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_2s{overflow:hidden;border:1px solid #188cb6;}
 .wsa_2s div{position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:4px 5px 5px;}
 .wsa_2s div:nth-child(1){color:#188cb6;background-color:#fff;}
 .wsa_2s div:nth-child(2){background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom,  #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );width:230px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translate(-250px, 0px) skewX(-30deg);-webkit-transform:translate(-250px, 0px) skewX(-30deg);-moz-transform:translate(-250px, 0px) skewX(-30deg);}
 .wsa_2s div:nth-child(3){color:#fff;left:-200px;transition:left 0.2s ease;-webkit-transition:left 0.2s ease;-moz-transition:left 0.2s ease;}
 .wsa_2s:hover div:nth-child(2){transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transform:translate(-15px, 0px) skewX(-30deg);-webkit-transform:translate(-15px, 0px) skewX(-30deg);-moz-transform:translate(-15px, 0px) skewX(-30deg);}
 .wsa_2s:hover div:nth-child(3){left:0px;transition:left 0.30000000000000004s ease;-webkit-transition:left 0.30000000000000004s ease;-moz-transition:left 0.30000000000000004s ease;}
 .wsa_2s div a,.wsa_2s:hover div a{color:#fff;text-decoration:none;}
</style>

<div class="warges"><div class="knopka_avd wsa_2s"><div>Кнопка</div><div></div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_2z{overflow:hidden;border:1px solid #488700;}
 .wsa_2z div{position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:4px 5px 5px;}
 .wsa_2z div:nth-child(1){color:#488700;background-color:#fff;}
 .wsa_2z div:nth-child(2){background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom,  #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );width:230px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translate(-250px, 0px) skewX(-30deg);-webkit-transform:translate(-250px, 0px) skewX(-30deg);-moz-transform:translate(-250px, 0px) skewX(-30deg);}
 .wsa_2z div:nth-child(3){color:#fff;left:-200px;transition:left 0.2s ease;-webkit-transition:left 0.2s ease;-moz-transition:left 0.2s ease;}
 .wsa_2z:hover div:nth-child(2){transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transform:translate(-15px, 0px) skewX(-30deg);-webkit-transform:translate(-15px, 0px) skewX(-30deg);-moz-transform:translate(-15px, 0px) skewX(-30deg);}
 .wsa_2z:hover div:nth-child(3){left:0px;transition:left 0.30000000000000004s ease;-webkit-transition:left 0.30000000000000004s ease;-moz-transition:left 0.30000000000000004s ease;}
 .wsa_2z div a,.wsa_2z:hover div a{color:#fff;text-decoration:none;}
</style>

<div class="warges"><div class="knopka_avd wsa_2z"><div>Кнопка</div><div></div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_2r{overflow:hidden;border:1px solid #9e0e0e;}
 .wsa_2r div{position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:4px 5px 5px;}
 .wsa_2r div:nth-child(1){color:#9e0e0e;background-color:#fff;}
 .wsa_2r div:nth-child(2){background-color:#9e0e0e;background:-moz-linear-gradient(to bottom, #9e0e0e 0%, #9e0e0e 47%, #d33636 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#9e0e0e), color-stop(47%,#9e0e0e), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom,  #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#d33636',GradientType=0 );width:230px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:translate(-250px, 0px) skewX(-30deg);-webkit-transform:translate(-250px, 0px) skewX(-30deg);-moz-transform:translate(-250px, 0px) skewX(-30deg);}
 .wsa_2r div:nth-child(3){color:#fff;left:-200px;transition:left 0.2s ease;-webkit-transition:left 0.2s ease;-moz-transition:left 0.2s ease;}
 .wsa_2r:hover div:nth-child(2){transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transform:translate(-15px, 0px) skewX(-30deg);-webkit-transform:translate(-15px, 0px) skewX(-30deg);-moz-transform:translate(-15px, 0px) skewX(-30deg);}
 .wsa_2r:hover div:nth-child(3){left:0px;transition:left 0.30000000000000004s ease;-webkit-transition:left 0.30000000000000004s ease;-moz-transition:left 0.30000000000000004s ease;}
 .wsa_2r div a,.wsa_2r:hover div a{color:#fff;text-decoration:none;}
</style>

<div class="warges"><div class="knopka_avd wsa_2r"><div>Кнопка</div><div></div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_3s div{padding:5px;border:1px solid #188cb6;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_3s div:nth-child(1),.wsa_3s:hover div:nth-child(2){background:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );}
 .wsa_3s:hover div:nth-child(1){color:#fff;}
 .wsa_3s div:nth-child(1){color:#188cb6;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3s div:nth-child(2){color:#188cb6;background-color:#fff;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3s:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_3s:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);}
 .wsa_3s div a{color:#188cb6;text-decoration:none;}
 .wsa_3s:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_3s"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_3z div{padding:5px;border:1px solid #488700;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_3z div:nth-child(1),.wsa_3z:hover div:nth-child(2){background:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );}
 .wsa_3z:hover div:nth-child(1){color:#fff;}
 .wsa_3z div:nth-child(1){color:#488700;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3z div:nth-child(2){color:#488700;background-color:#fff;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3z:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_3z:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);}
 .wsa_3z div a{color:#488700;text-decoration:none;}
 .wsa_3z:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_3z"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_3r div{padding:5px;border:1px solid #9e0e0e;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_3r div:nth-child(1),.wsa_3r:hover div:nth-child(2){background:#9e0e0e;background:-moz-linear-gradient(to bottom, #9e0e0e 0%, #9e0e0e 47%, #d33636 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#9e0e0e), color-stop(47%,#9e0e0e), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);background:linear-gradient(to bottom, #9e0e0e 0%,#9e0e0e 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#d33636',GradientType=0 );}
 .wsa_3r:hover div:nth-child(1){color:#fff;}
 .wsa_3r div:nth-child(1){color:#9e0e0e;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3r div:nth-child(2){color:#9e0e0e;background-color:#fff;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform-origin:50% 50% -17px;-webkit-transform-origin:50% 50% -17px;-moz-transform-origin:50% 50% -17px;}
 .wsa_3r:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);}
 .wsa_3r:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);}
 .wsa_3r div a{color:#9e0e0e;text-decoration:none;}
 .wsa_3r:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_3r"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_5s{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .wsa_5s div{border:1px solid #188cb6;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_5s div:nth-child(1){color:#188cb6;background-color:#fff;transform:rotateX(0deg) translateZ(0px);-webkit-transform:rotateX(0deg) translateZ(0px);-moz-transform:rotateX(0deg) translateZ(0px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5s div:nth-child(2){color:#fff;background-color:#188cb6;background:-moz-linear-gradient(to bottom, #188cb6 0%, #188cb6 47%, #4dc7f4 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#188cb6), color-stop(47%,#188cb6), color-stop(100%,#4dc7f4));background:-webkit-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-o-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:-ms-linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);background:linear-gradient(to bottom, #188cb6 0%,#188cb6 47%,#4dc7f4 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#188cb6', endColorstr='#4dc7f4',GradientType=0 );transform:rotateX(-179.5deg) translateZ(1px);-webkit-transform:rotateX(-179.5deg) translateZ(1px);-moz-transform:rotateX(-179.5deg) translateZ(1px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5s:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(179.5deg);-webkit-transform:rotateX(179.5deg);-moz-transform:rotateX(179.5deg);}
 .wsa_5s:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-webkit-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-moz-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);}
 .wsa_5s div a{color:#188cb6;text-decoration:none;}
 .wsa_5s:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_5s"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_5z{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .wsa_5z div{border:1px solid #488700;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_5z div:nth-child(1){color:#488700;background-color:#fff;transform:rotateX(0deg) translateZ(0px);-webkit-transform:rotateX(0deg) translateZ(0px);-moz-transform:rotateX(0deg) translateZ(0px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5z div:nth-child(2){color:#fff;background-color:#488700;background:-moz-linear-gradient(to bottom, #488700 0%, #488700 47%, #8ecd3d 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#488700), color-stop(47%,#488700), color-stop(100%,#8ecd3d));background:-webkit-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-o-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:-ms-linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);background:linear-gradient(to bottom, #488700 0%,#488700 47%,#8ecd3d 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#488700', endColorstr='#8ecd3d',GradientType=0 );transform:rotateX(-179.5deg) translateZ(1px);-webkit-transform:rotateX(-179.5deg) translateZ(1px);-moz-transform:rotateX(-179.5deg) translateZ(1px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5z:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(179.5deg);-webkit-transform:rotateX(179.5deg);-moz-transform:rotateX(179.5deg);}
 .wsa_5z:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-webkit-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-moz-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);}
 .wsa_5z div a{color:#488700;text-decoration:none;}
 .wsa_5z:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_5z"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .warges{margin:20px auto;padding:0;width:200px;max-width:250px;box-sizing:border-box;display:block;position:relative;}
 .knopka_avd{margin:10px;padding:0;font-size:18px;font-family:verdana;height:38px;cursor:default;text-align:center;-moz-user-select:none;border:0 none;box-sizing:border-box;position:relative;}
 .knopka_avd:hover{cursor:pointer;}
 .wsa_5r{perspective:500px;-webkit-perspective:500px;-moz-perspective:500px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
 .wsa_5r div{border:1px solid #9e0e0e;padding:5px;position:absolute;text-align:center;width:100%;height:38px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
 .wsa_5r div:nth-child(1){color:#9e0e0e;background-color:#fff;transform:rotateX(0deg) translateZ(0px);-webkit-transform:rotateX(0deg) translateZ(0px);-moz-transform:rotateX(0deg) translateZ(0px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5r div:nth-child(2){color:#fff;background-color:#800000;background:-moz-linear-gradient(to bottom, #800000 0%, #800000 47%, #d33636 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#800000), color-stop(47%,#800000), color-stop(100%,#d33636));background:-webkit-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-o-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:-ms-linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);background:linear-gradient(to bottom, #800000 0%,#800000 47%,#d33636 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#d33636',GradientType=0 );transform:rotateX(-179.5deg) translateZ(1px);-webkit-transform:rotateX(-179.5deg) translateZ(1px);-moz-transform:rotateX(-179.5deg) translateZ(1px);transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}
 .wsa_5r:hover div:nth-child(1){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(179.5deg);-webkit-transform:rotateX(179.5deg);-moz-transform:rotateX(179.5deg);}
 .wsa_5r:hover div:nth-child(2){transition:all 0.2s ease;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-webkit-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);-moz-transform:rotateX(0deg) rotateY(0deg) translateZ(1px);}
 .wsa_5r div a{color:#9e0e0e;text-decoration:none;}
 .wsa_5r:hover div a{color:#fff;}
</style>

<div class="warges"><div class="knopka_avd wsa_5r"><div>Кнопка</div><div><a href="#">Кнопка</a></div></div></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
  .bucn_s{text-decoration:none;outline:none;display:inline-block;padding:14px 30px;margin:10px 20px;position:relative;color:#fff;font-size:20px;font-family:verdana;letter-spacing:1px;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 4px #999;-moz-box-shadow:0 0 4px #999;-o-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;background-color:#4dc7f4;background-image:linear-gradient(to top, #188cb6 0%, #4dc7f4 100%);background-image:-o-linear-gradient(to top, #188cb6 0%, #4dc7f4 100%);background-image:-moz-linear-gradient(to top, #188cb6 0%, #4dc7f4 100%);background-image:-webkit-linear-gradient(to top, #188cb6 0%, #4dc7f4 100%);background-image:-ms-linear-gradient(to top, #188cb6 0%, #4dc7f4 100%);border:2px solid #198db7;}
 .bucn_s:before,.bucn_s:after{content:"";position:absolute;width:0;height:0;opacity:0;box-sizing:border-box;}
 .bucn_s:before{bottom:0;left:0;transition:0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;border-left:2px solid #7ff3ff;border-top:2px solid #7ff3ff;}
 .bucn_s:after{top:0;right:0;transition:0s ease opacity .4s, .2s ease width , .2s ease height .2s;border-right:2px solid #7ff3ff;border-bottom:2px solid #7ff3ff;}
 .bucn_s:hover:before,.bucn_s:hover:after{height:100%;width:100%;opacity:1;}
 .bucn_s:hover:before{transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;}
 .bucn_s:hover:after{transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;}
 .bucn_s:hover{-webkit-box-shadow:0 0 4px #666;-moz-box-shadow:0 0 4px #666;-o-box-shadow:0 0 4px #666;box-shadow:0 0 4px #666;background-color:#188cb6;background-image:linear-gradient(to top, #4dc7f4 0%, #188cb6 100%);background-image:-o-linear-gradient(to top, #4dc7f4 0%, #188cb6 100%);background-image:-moz-linear-gradient(to top, #4dc7f4 0%, #188cb6 100%);background-image:-webkit-linear-gradient(to top, #4dc7f4 0%, #188cb6 100%);background-image:-ms-linear-gradient(to top, #4dc7f4 0%, #188cb6 100%);}
 *::before, *::after{box-sizing:border-box;}
</style>

<div class="avd_div"><a href="#" class="bucn_s">Наведи на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .bucn_z{text-decoration:none;outline:none;display:inline-block;padding:14px 30px;margin:10px 20px;position:relative;color:#fff;font-size:20px;font-family:verdana;letter-spacing:1px;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 4px #999;-moz-box-shadow:0 0 4px #999;-o-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;background-color:#8ecd3d;background-image:linear-gradient(to top, #488700 0%, #8ecd3d 100%);background-image:-o-linear-gradient(to top, #488700 0%, #8ecd3d 100%);background-image:-moz-linear-gradient(to top, #488700 0%, #8ecd3d 100%);background-image:-webkit-linear-gradient(to top, #488700 0%, #8ecd3d 100%);background-image:-ms-linear-gradient(to top, #488700 0%, #8ecd3d 100%);border:2px solid #488700;}
 .bucn_z:before,.bucn_z:after{content:"";position:absolute;width:0;height:0;opacity:0;box-sizing:border-box;}
 .bucn_z:before{bottom:0;left:0;transition:0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;border-left:2px solid #baf969;border-top:2px solid #baf969;}
 .bucn_z:after{top:0;right:0;transition:0s ease opacity .4s, .2s ease width , .2s ease height .2s;border-right:2px solid #baf969;border-bottom:2px solid #baf969;}
 .bucn_z:hover:before,.bucn_z:hover:after{height:100%;width:100%;opacity:1;}
 .bucn_z:hover:before{transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;}
 .bucn_z:hover:after{transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;}
 .bucn_z:hover{-webkit-box-shadow:0 0 4px #666;-moz-box-shadow:0 0 4px #666;-o-box-shadow:0 0 4px #666;box-shadow:0 0 4px #666;background-color:#488700;background-image:linear-gradient(to top, #8ecd3d 0%, #488700 100%);background-image:-o-linear-gradient(to top, #8ecd3d 0%, #488700 100%);background-image:-moz-linear-gradient(to top, #8ecd3d 0%, #488700 100%);background-image:-webkit-linear-gradient(to top, #8ecd3d 0%, #488700 100%);background-image:-ms-linear-gradient(to top, #8ecd3d 0%, #488700 100%);}
 *::before, *::after{box-sizing:border-box;}
</style>

<div class="avd_div"><a href="#" class="bucn_z">Наведи на кнопку</a></div>

Кнопка

<style type="text/css">
 .avd_div{margin:30px auto;padding:0;text-align:center;display:block;}
 .bucn_r{text-decoration:none;outline:none;display:inline-block;padding:14px 30px;margin:10px 20px;position:relative;color:#fff;font-size:20px;font-family:verdana;letter-spacing:1px;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 4px #999;-moz-box-shadow:0 0 4px #999;-o-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;background-color:#d33636;background-image:linear-gradient(to top, #800000 0%, #d33636 100%);background-image:-o-linear-gradient(to top, #800000 0%, #d33636 100%);background-image:-moz-linear-gradient(to top, #800000 0%, #d33636 100%);background-image:-webkit-linear-gradient(to top, #800000 0%, #d33636 100%);background-image:-ms-linear-gradient(to top, #800000 0%, #d33636 100%);border:2px solid #800000;}
 .bucn_r:before,.bucn_r:after{content:"";position:absolute;width:0;height:0;opacity:0;box-sizing:border-box;}
 .bucn_r:before{bottom:0;left:0;transition:0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;border-left:2px solid #ff9494;border-top:2px solid #ff9494;}
 .bucn_r:after{top:0;right:0;transition:0s ease opacity .4s, .2s ease width , .2s ease height .2s;border-right:2px solid #ff9494;border-bottom:2px solid #ff9494;}
 .bucn_r:hover:before,.bucn_r:hover:after{height:100%;width:100%;opacity:1;}
 .bucn_r:hover:before{transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;}
 .bucn_r:hover:after{transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;}
 .bucn_r:hover{-webkit-box-shadow:0 0 4px #666;-moz-box-shadow:0 0 4px #666;-o-box-shadow:0 0 4px #666;box-shadow:0 0 4px #666;background-color:#800000;background-image:linear-gradient(to top, #d33636 0%, #800000 100%);background-image:-o-linear-gradient(to top, #d33636 0%, #800000 100%);background-image:-moz-linear-gradient(to top, #d33636 0%, #800000 100%);background-image:-webkit-linear-gradient(to top, #d33636 0%, #800000 100%);background-image:-ms-linear-gradient(to top, #d33636 0%, #800000 100%);}
 *::before, *::after{box-sizing:border-box;}
</style>

<div class="avd_div"><a href="#" class="bucn_r">Наведи на кнопку</a></div>

Кнопка

Показать ещё кнопки

Нажмите на кнопку, чтобы получить код CSS.

Большая кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .rounded{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
 .gray{border:solid 1px #333333;background-color:#8f8f8f;background:-moz-linear-gradient(top, #8f8f8f 0%, #616161 100%);background:-webkit-linear-gradient(top, #8f8f8f 0%, #616161 100%);background:-o-linear-gradient(top, #8f8f8f 0%, #616161 100%);background:-ms-linear-gradient(top, #8f8f8f 0% ,#616161 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#616161',GradientType=0 );background:linear-gradient(top, #8f8f8f 0% ,#616161 100%);-webkit-box-shadow:0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF;}
 .gray:hover,.gray:focus{color:#fff;background-color:#808080;background:-moz-linear-gradient(top, #808080 0%, #545454 100%);background:-webkit-linear-gradient(top, #808080 0%, #545454 100%);background:-o-linear-gradient(top, #808080 0%, #545454 100%);background:-ms-linear-gradient(top, #808080 0% ,#545454 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#545454',GradientType=0 );background:linear-gradient(top, #808080 0% ,#545454 100%);}
 .gray:active{background-color:#6b6b6b;background:-moz-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%);background:-webkit-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%);background:-o-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%);background:-ms-linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#4a4a4a',GradientType=0 );background:linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%);}
 .effect-1{transition:padding 1s;-webkit-transition:padding 1s;-moz-transition:padding 1s;-o-transition:padding 1s;-ms-transition:padding 1s;}
 .effect-1:hover{padding:10px 150px;}
</style>

<a href="#" class="button rounded gray effect-1">Большая CSS кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
 .blue{border:solid 1px #004F72;background-color:#3BA4C7;background:-moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );background:linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);-webkit-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;}
 .blue:hover{background-color:#1f97bf;background:-moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-o-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 );background:linear-gradient(top, #1f97bf 0% ,#0b7396 100%);}
 .blue:active{background-color:#1b7694;background:-moz-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-o-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 );background:linear-gradient(top, #1b7694 0% ,#0d6380 100%);}
 .effect-2{transition:border-radius 0.6s;-webkit-transition:border-radius 0.6s;-moz-transition:border-radius 0.6s;-o-transition:border-radius 0.6s;-ms-transition:border-radius 0.6s;}
 .effect-2:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
</style>

<a href="#" class="button square blue effect-2">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
 .green{border:solid 1px #3b7200;background-color:#88c72a;background:-moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-o-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );background:linear-gradient(top, #88c72a 0% ,#709e0e 100%);-webkit-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;}
 .green:hover{background-color:#7fb52f;background:-moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-o-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );background:linear-gradient(top, #7fb52f 0% ,#67910b 100%);}
 .green:active{background-color:#638f22;background:-moz-linear-gradient(top, #638f22 0%, #486608 100%);background:-webkit-linear-gradient(top, #638f22 0%, #486608 100%);background:-o-linear-gradient(top, #638f22 0%, #486608 100%);background:-ms-linear-gradient(top, #638f22 0% ,#486608 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );background:linear-gradient(top, #638f22 0% ,#486608 100%);}
 .effect-2{transition:border-radius 0.6s;-webkit-transition:border-radius 0.6s;-moz-transition:border-radius 0.6s;-o-transition:border-radius 0.6s;-ms-transition:border-radius 0.6s;}
 .effect-2:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
</style>

<a href="#" class="button square green effect-2">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
 .red{border:solid 1px #720000;background-color:#c72a2a;background:-moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );background:linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);-webkit-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;}
 .red:hover{background-color:#b52f2f;background:-moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );background:linear-gradient(top, #b52f2f 0% ,#910b0b 100%);}
 .red:active{background-color:#8f2222;background:-moz-linear-gradient(top, #8f2222 0%, #660808 100%);background:-webkit-linear-gradient(top, #8f2222 0%, #660808 100%);background:-o-linear-gradient(top, #8f2222 0%, #660808 100%);background:-ms-linear-gradient(top, #8f2222 0% ,#660808 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );background:linear-gradient(top, #8f2222 0% ,#660808 100%);}
 .effect-2{transition:border-radius 0.6s;-webkit-transition:border-radius 0.6s;-moz-transition:border-radius 0.6s;-o-transition:border-radius 0.6s;-ms-transition:border-radius 0.6s;}
 .effect-2:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
</style>

<a href="#" class="button square red effect-2">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .rounded{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
 .blue{border:solid 1px #004F72;background-color:#3BA4C7;background:-moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );background:linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);-webkit-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;}
 .blue:hover{background-color:#1f97bf;background:-moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-o-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 );background:linear-gradient(top, #1f97bf 0% ,#0b7396 100%);}
 .blue:active{background-color:#1b7694;background:-moz-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-o-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 );background:linear-gradient(top, #1b7694 0% ,#0d6380 100%);}
 .effect-3{transition:border-radius 1s;-webkit-transition:border-radius 1s;-moz-transition:border-radius 1s;-o-transition:border-radius 1s;-ms-transition:border-radius 1s;}
 .effect-3:hover{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
</style>

<a href="#" class="button rounded blue effect-3">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .rounded{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
 .green{border:solid 1px #3b7200;background-color:#88c72a;background:-moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-o-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );background:linear-gradient(top, #88c72a 0% ,#709e0e 100%);-webkit-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;}
 .green:hover{background-color:#7fb52f;background:-moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-o-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );background:linear-gradient(top, #7fb52f 0% ,#67910b 100%);}
 .green:active{background-color:#638f22;background:-moz-linear-gradient(top, #638f22 0%, #486608 100%);background:-webkit-linear-gradient(top, #638f22 0%, #486608 100%);background:-o-linear-gradient(top, #638f22 0%, #486608 100%);background:-ms-linear-gradient(top, #638f22 0% ,#486608 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );background:linear-gradient(top, #638f22 0% ,#486608 100%);}
 .effect-3{transition:border-radius 1s;-webkit-transition:border-radius 1s;-moz-transition:border-radius 1s;-o-transition:border-radius 1s;-ms-transition:border-radius 1s;}
 .effect-3:hover{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
</style>

<a href="#" class="button rounded green effect-3">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .rounded{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
 .red{border:solid 1px #720000;background-color:#c72a2a;background:-moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );background:linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);-webkit-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;}
 .red:hover{background-color:#b52f2f;background:-moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );background:linear-gradient(top, #b52f2f 0% ,#910b0b 100%);}
 .red:active{background-color:#8f2222;background:-moz-linear-gradient(top, #8f2222 0%, #660808 100%);background:-webkit-linear-gradient(top, #8f2222 0%, #660808 100%);background:-o-linear-gradient(top, #8f2222 0%, #660808 100%);background:-ms-linear-gradient(top, #8f2222 0% ,#660808 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );background:linear-gradient(top, #8f2222 0% ,#660808 100%);}
 .effect-3{transition:border-radius 1s;-webkit-transition:border-radius 1s;-moz-transition:border-radius 1s;-o-transition:border-radius 1s;-ms-transition:border-radius 1s;}
 .effect-3:hover{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
</style>

<a href="#" class="button rounded red effect-3">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-1{-webkit-border-radius:5px 50px 5px 50px;border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
 .blue{border:solid 1px #004F72;background-color:#3BA4C7;background:-moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );background:linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);-webkit-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;}
 .blue:hover{background-color:#1f97bf;background:-moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-o-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 );background:linear-gradient(top, #1f97bf 0% ,#0b7396 100%);}
 .blue:active{background-color:#1b7694;background:-moz-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-o-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 );background:linear-gradient(top, #1b7694 0% ,#0d6380 100%);}
 .effect-4{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-4:hover{border-radius:50px 5px 50px 5px;-webkit-border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
</style>

<a href="#" class="button square-1 blue effect-4">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-1{-webkit-border-radius:5px 50px 5px 50px;border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
 .green{border:solid 1px #3b7200;background-color:#88c72a;background:-moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-o-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );background:linear-gradient(top, #88c72a 0% ,#709e0e 100%);-webkit-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;}
 .green:hover{background-color:#7fb52f;background:-moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-o-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );background:linear-gradient(top, #7fb52f 0% ,#67910b 100%);}
 .green:active{background-color:#638f22;background:-moz-linear-gradient(top, #638f22 0%, #486608 100%);background:-webkit-linear-gradient(top, #638f22 0%, #486608 100%);background:-o-linear-gradient(top, #638f22 0%, #486608 100%);background:-ms-linear-gradient(top, #638f22 0% ,#486608 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );background:linear-gradient(top, #638f22 0% ,#486608 100%);}
 .effect-4{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-4:hover{border-radius:50px 5px 50px 5px;-webkit-border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
</style>

<a href="#" class="button square-1 green effect-4">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-1{-webkit-border-radius:5px 50px 5px 50px;border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
 .red{border:solid 1px #720000;background-color:#c72a2a;background:-moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );background:linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);-webkit-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;}
 .red:hover{background-color:#b52f2f;background:-moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );background:linear-gradient(top, #b52f2f 0% ,#910b0b 100%);}
 .red:active{background-color:#8f2222;background:-moz-linear-gradient(top, #8f2222 0%, #660808 100%);background:-webkit-linear-gradient(top, #8f2222 0%, #660808 100%);background:-o-linear-gradient(top, #8f2222 0%, #660808 100%);background:-ms-linear-gradient(top, #8f2222 0% ,#660808 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );background:linear-gradient(top, #8f2222 0% ,#660808 100%);}
 .effect-4{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-4:hover{border-radius:50px 5px 50px 5px;-webkit-border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
</style>

<a href="#" class="button square-1 red effect-4">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-2{-webkit-border-radius:50px 5px 50px 5px;border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
 .blue{border:solid 1px #004F72;background-color:#3BA4C7;background:-moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );background:linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);-webkit-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;}
 .blue:hover{background-color:#1f97bf;background:-moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-o-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 );background:linear-gradient(top, #1f97bf 0% ,#0b7396 100%);}
 .blue:active{background-color:#1b7694;background:-moz-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-o-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 );background:linear-gradient(top, #1b7694 0% ,#0d6380 100%);}
 .effect-5{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-5:hover{border-radius:5px 50px 5px 50px;-webkit-border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
</style>

<a href="#" class="button square-2 blue effect-5">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-2{-webkit-border-radius:50px 5px 50px 5px;border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
 .green{border:solid 1px #3b7200;background-color:#88c72a;background:-moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-o-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );background:linear-gradient(top, #88c72a 0% ,#709e0e 100%);-webkit-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;}
 .green:hover{background-color:#7fb52f;background:-moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-o-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );background:linear-gradient(top, #7fb52f 0% ,#67910b 100%);}
 .green:active{background-color:#638f22;background:-moz-linear-gradient(top, #638f22 0%, #486608 100%);background:-webkit-linear-gradient(top, #638f22 0%, #486608 100%);background:-o-linear-gradient(top, #638f22 0%, #486608 100%);background:-ms-linear-gradient(top, #638f22 0% ,#486608 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );background:linear-gradient(top, #638f22 0% ,#486608 100%);}
 .effect-5{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-5:hover{border-radius:5px 50px 5px 50px;-webkit-border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
</style>

<a href="#" class="button square-2 green effect-5">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-2{-webkit-border-radius:50px 5px 50px 5px;border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
 .red{border:solid 1px #720000;background-color:#c72a2a;background:-moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );background:linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);-webkit-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;}
 .red:hover{background-color:#b52f2f;background:-moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );background:linear-gradient(top, #b52f2f 0% ,#910b0b 100%);}
 .red:active{background-color:#8f2222;background:-moz-linear-gradient(top, #8f2222 0%, #660808 100%);background:-webkit-linear-gradient(top, #8f2222 0%, #660808 100%);background:-o-linear-gradient(top, #8f2222 0%, #660808 100%);background:-ms-linear-gradient(top, #8f2222 0% ,#660808 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );background:linear-gradient(top, #8f2222 0% ,#660808 100%);}
 .effect-5{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-5:hover{border-radius:5px 50px 5px 50px;-webkit-border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
</style>

<a href="#" class="button square-2 red effect-5">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .rounded{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
 .blue{border:solid 1px #004F72;background-color:#3BA4C7;background:-moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);background:-ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );background:linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);-webkit-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF;}
 .blue:hover{background-color:#1f97bf;background:-moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-o-linear-gradient(top, #1f97bf 0%, #0b7396 100%);background:-ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 );background:linear-gradient(top, #1f97bf 0% ,#0b7396 100%);}
 .blue:active{background-color:#1b7694;background:-moz-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-o-linear-gradient(top, #1b7694 0%, #0d6380 100%);background:-ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 );background:linear-gradient(top, #1b7694 0% ,#0d6380 100%);}
 .effect-5{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-5:hover{border-radius:5px 50px 5px 50px;-webkit-border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
</style>

<a href="#" class="button rounded blue effect-5">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
 .green{border:solid 1px #3b7200;background-color:#88c72a;background:-moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-o-linear-gradient(top, #88c72a 0%, #709e0e 100%);background:-ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );background:linear-gradient(top, #88c72a 0% ,#709e0e 100%);-webkit-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;}
 .green:hover{background-color:#7fb52f;background:-moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-o-linear-gradient(top, #7fb52f 0%, #67910b 100%);background:-ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );background:linear-gradient(top, #7fb52f 0% ,#67910b 100%);}
 .green:active{background-color:#638f22;background:-moz-linear-gradient(top, #638f22 0%, #486608 100%);background:-webkit-linear-gradient(top, #638f22 0%, #486608 100%);background:-o-linear-gradient(top, #638f22 0%, #486608 100%);background:-ms-linear-gradient(top, #638f22 0% ,#486608 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );background:linear-gradient(top, #638f22 0% ,#486608 100%);}
 .effect-4{transition:border-radius 1s ease 0s;-webkit-transition:border-radius 1s ease 0s;-moz-transition:border-radius 1s ease 0s;-o-transition:border-radius 1s ease 0s;-ms-transition:border-radius 1s ease 0s;}
 .effect-4:hover{border-radius:50px 5px 50px 5px;-webkit-border-radius:50px 5px 50px 5px;-moz-border-radius-top-left:50px;-moz-border-radius-top-right:5px;-moz-border-radius-bottom-left:5px;-moz-border-radius-bottom-right:50px;}
</style>

<a href="#" class="button square green effect-4">Кнопка</a>

Кнопка

<style type="text/css">
 .button{margin:0 20px;padding:10px 75px;color:#FFF;font-weight:bold;font-size:18px;font-family:Helvetica, Arial, sans-serif;text-shadow:2px 2px 1px #595959;filter:dropshadow(color=#595959, offx=1, offy=1);text-decoration:none;}
 .square-1{-webkit-border-radius:5px 50px 5px 50px;border-radius:5px 50px 5px 50px;-moz-border-radius-top-left:5px;-moz-border-radius-top-right:50px;-moz-border-radius-bottom-left:50px;-moz-border-radius-bottom-right:5px;}
 .red{border:solid 1px #720000;background-color:#c72a2a;background:-moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);background:-ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );background:linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);-webkit-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;-moz-box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;box-shadow:0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;}
 .red:hover{background-color:#b52f2f;background:-moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);background:-ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );background:linear-gradient(top, #b52f2f 0% ,#910b0b 100%);}
 .red:active{background-color:#8f2222;background:-moz-linear-gradient(top, #8f2222 0%, #660808 100%);background:-webkit-linear-gradient(top, #8f2222 0%, #660808 100%);background:-o-linear-gradient(top, #8f2222 0%, #660808 100%);background:-ms-linear-gradient(top, #8f2222 0% ,#660808 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );background:linear-gradient(top, #8f2222 0% ,#660808 100%);}
 .effect-3{transition:border-radius 1s;-webkit-transition:border-radius 1s;-moz-transition:border-radius 1s;-o-transition:border-radius 1s;-ms-transition:border-radius 1s;}
 .effect-3:hover{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
</style>

<a href="#" class="button square-1 red effect-3">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_p{background:#f997b0;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f997b0), to(#f56778));background:-moz-linear-gradient(#f997b0, #f56778);background:linear-gradient(#f997b0, #f56778);border:solid 1px #ee8090;border-bottom:solid 3px #cb5462;box-shadow:inset 0 0 0 1px #fbc1d0;color:#913944;text-shadow:0 1px 0 #f9a0ad;}
 .rrr_p:hover{background:#f57184;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f57184), to(#f78297));background:-moz-linear-gradient(#f57184, #f78297);background:linear-gradient(#f57184, #f78297);border:solid 1px #e26272;border-bottom:solid 3px #cb5462;box-shadow:inset 0 0 0 1px #f9aab5;}
 .rrr_p:active{background:#f06a7c;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f06a7c), to(#f56c7e));background:-moz-linear-gradient(#f06a7c, #f56c7e);background:linear-gradient(#f06a7c, #f56c7e);border:solid 1px #a14753;box-shadow:inset 0 10px 15px 0 #d45d6d;}
</style>

<a href="#" class="wsa_6s rrr_p">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_b{background:#abe4f8;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#abe4f8), to(#74d0f4));background:-moz-linear-gradient(#abe4f8, #74d0f4);background:linear-gradient(#abe4f8, #74d0f4);border:solid 1px #8cc5d9;border-bottom:solid 3px #589cb6;box-shadow:inset 0 0 0 1px #cdeffb;color:#42788e;text-shadow:0 1px 0 #b6e6f9;}
 .rrr_b:hover{background:#80d4f5;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#80d4f5), to(#92dbf6));background:-moz-linear-gradient(#80d4f5, #92dbf6);background:linear-gradient(#80d4f5, #92dbf6);border:solid 1px #79acbe;border-bottom:solid 3px #589cb6;box-shadow:inset 0 0 0 1px #b2e6f8;}
 .rrr_b:active{background:#89d2ee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#89d2ee), to(#84cae6));background:-moz-linear-gradient(#89d2ee, #84cae6);background:linear-gradient(#89d2ee, #84cae6);border:solid 1px #5c8d9f;box-shadow:inset 0 10px 15px 0 #79b9d2;}
</style>

<a href="#" class="wsa_6s rrr_b">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_g{background:#cae285;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#cae285), to(#a3cd5a));background:-moz-linear-gradient(#cae285, #a3cd5a);background:linear-gradient(#cae285, #a3cd5a);border:solid 1px #aad063;border-bottom:solid 3px #799545;box-shadow:inset 0 0 0 1px #e0eeb6;color:#5d7731;text-shadow:0 1px 0 #d0e5a4;}
 .rrr_g:hover{background:#abd164;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#abd164), to(#b9d972));background:-moz-linear-gradient(#abd164, #b9d972);background:linear-gradient(#abd164, #b9d972);border:solid 1px #98b85b;border-bottom:solid 3px #799545;box-shadow:inset 0 0 0 1px #cce3a1;}
 .rrr_g:active{background:#a4cb5d;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#a4cb5d), to(#9ec45a));background:-moz-linear-gradient(#a4cb5d, #9ec45a);background:linear-gradient(#a4cb5d, #9ec45a);border:solid 1px #6e883f;box-shadow:inset 0 10px 15px 0 #90b352;}
</style>

<a href="#" class="wsa_6s rrr_g">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
.rrr_t{background-color:#b7f2f4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#b7f2f4), to(#81e8eb));background:-moz-linear-gradient(#b7f2f4, #81e8eb);background:linear-gradient(#b7f2f4, #81e8eb);border:solid 1px #87d3d5;border-bottom:solid 3px #4fa7aa;box-shadow:inset 0 0 0 1px #d4f8f8;color:#437b7d;text-shadow:0 1px 0 #bef3f5;}
 .rrr_t:hover{background-color:#8deaed;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#8deaed), to(#9fedf0));background:-moz-linear-gradient(#8deaed, #9fedf0);background:linear-gradient(#8deaed, #9fedf0);border:solid 1px #79c5c7;border-bottom:solid 3px #4fa7aa;box-shadow:inset 0 0 0 1px #b9f2f5;}
 .rrr_t:active{background-color:#84e4e7;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#84e4e7), to(#80dcdf));background:-moz-linear-gradient(#84e4e7, #80dcdf);background:linear-gradient(#84e4e7, #80dcdf);border:solid 1px #58999b;box-shadow:inset 0 10px 15px 0 #75c9cc;}
</style>

<a href="#" class="wsa_6s rrr_t">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_ch{background:#656565;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444));background:-moz-linear-gradient(#656565, #444);background:linear-gradient(#656565, #444);border:solid 1px #535353;border-bottom:solid 3px #414141;box-shadow:inset 0 0 0 1px #939393;color:#fff;text-shadow:0 1px 0 #2f2f2f;}
 .rrr_ch:hover{background:#4c4c4c;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656));background:-moz-linear-gradient(#4c4c4c, #565656);background:linear-gradient(#4c4c4c, #565656);border:solid 1px #464646;border-bottom:solid 3px #414141;box-shadow:inset 0 0 0 1px #818181;}
 .rrr_ch:active{background:#474747;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444));background:-moz-linear-gradient(#474747, #444);background:linear-gradient(#474747, #444);border:solid 1px #2f2f2f;box-shadow:inset 0 10px 15px 0 #3e3e3e;}
</style>

<a href="#" class="wsa_6s rrr_ch">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_gr{background:#d1d1d1;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#d1d1d1), to(#afafaf));background:-moz-linear-gradient(#d1d1d1, #afafaf);background:linear-gradient(#d1d1d1, #afafaf);border:solid 1px #b4b4b4;border-bottom:solid 3px #878787;box-shadow:inset 0 0 0 1px #e3e3e3;color:#555;text-shadow:0 1px 0 #d6d6d6;}
 .rrr_gr:hover{background:#b7b7b7;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#b7b7b7), to(#c2c2c2));background:-moz-linear-gradient(#b7b7b7, #c2c2c2);background:linear-gradient(#b7b7b7, #c2c2c2);border:solid 1px #a2a2a2;border-bottom:solid 3px #878787;box-shadow:inset 0 0 0 1px #d4d4d4;}
 .rrr_gr:active{background:#afafaf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#afafaf), to(#a9a9a9));background:-moz-linear-gradient(#afafaf, #a9a9a9);background:linear-gradient(#afafaf, #a9a9a9);border:solid 1px #757575;box-shadow:inset 0 10px 15px 0 #9a9a9a;}
</style>

<a href="#" class="wsa_6s rrr_gr">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_o{background-color:#feda71;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#feda71), to(#febe4d));background:-moz-linear-gradient(#feda71, #febe4d);background:linear-gradient(#feda71, #febe4d);border:solid 1px #eab551;border-bottom:solid 3px #b98a37;box-shadow:inset 0 0 0 1px #fee9aa;color:#996633;text-shadow:0 1px 0 #fedd9b;}
 .rrr_o:hover{background-color:#fec455;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fec455), to(#fecd61));background:-moz-linear-gradient(#fec455, #fecd61);background:linear-gradient(#fec455, #fecd61);border:solid 1px #e6a93d;border-bottom:solid 3px #b98a37;box-shadow:inset 0 0 0 1px #fedb98;}
 .rrr_o:active{background-color:#f9bd4f;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f9bd4f), to(#f0b64d));background:-moz-linear-gradient(#f9bd4f, #f0b64d);background:linear-gradient(#f9bd4f, #f0b64d);border:solid 1px #a77f35;box-shadow:inset 0 10px 15px 0 #dba646;}
</style>

<a href="#" class="wsa_6s rrr_o">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_pu{background-color:#e8c4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e8c4e4), to(#d698d0));background:-moz-linear-gradient(#e8c4e4, #d698d0);background:linear-gradient(#e8c4e4, #d698d0);border:solid 1px #da9fd4;border-bottom:solid 3px #946890;box-shadow:inset 0 0 0 1px #f2dcef;color:#7b5777;text-shadow:0 1px 0 #eacae6;}
 .rrr_pu:hover{background-color:#daa2d4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#daa2d4), to(#e0b1db));background:-moz-linear-gradient(#daa2d4, #e0b1db);background:linear-gradient(#daa2d4, #e0b1db);border:solid 1px #ca91c4;border-bottom:solid 3px #946890;box-shadow:inset 0 0 0 1px #e9c7e6;}
 .rrr_pu:active{background-color:#d49ace;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#d49ace), to(#cc94c6));background:-moz-linear-gradient(#d49ace, #cc94c6);background:linear-gradient(#d49ace, #cc94c6);border:solid 1px #8e678a;box-shadow:inset 0 10px 15px 0 #ba87b5;}
</style>

<a href="#" class="wsa_6s rrr_pu">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_a{background-color:#becbd6;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#becbd6), to(#8da5b7));background:-moz-linear-gradient(#becbd6, #8da5b7);background:linear-gradient(#becbd6, #8da5b7);border:solid 1px #a1aeb7;border-bottom:solid 3px #62727e;box-shadow:inset 0 0 0 1px #d8e0e6;color:#515f6a;text-shadow:0 1px 0 #c4d0da;}
 .rrr_a:hover{background-color:#97adbd;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#97adbd), to(#a8bac8));background:-moz-linear-gradient(#97adbd, #a8bac8);background:linear-gradient(#97adbd, #a8bac8);border:solid 1px #96a2ab;border-bottom:solid 3px #62727e;box-shadow:inset 0 0 0 1px #c0ced7;}
 .rrr_a:active{background-color:#8fa6b6;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#8fa6b6), to(#8aa0b0));background:-moz-linear-gradient(#8fa6b6, #8aa0b0);background:linear-gradient(#8fa6b6, #8aa0b0);border:solid 1px #606f7a;box-shadow:inset 0 10px 15px 0 #7e92a1;}
</style>

<a href="#" class="wsa_6s rrr_a">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_cr{background-color:#c38b66;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#c38b66), to(#9d6741));background:-moz-linear-gradient(#c38b66, #9d6741);background:linear-gradient(#c38b66, #9d6741);border:solid 1px #422213;border-bottom:solid 3px #33180d;box-shadow:inset 0 0 0 1px #b98c62;color:#fff;text-shadow:0 1px 0 #7b502e;}
 .rrr_cr:hover{background-color:#9d6741;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9d6741), to(#c38b66));background:-moz-linear-gradient(#9d6741, #c38b66);background:linear-gradient(#9d6741, #c38b66);border:solid 1px #422213;border-bottom:solid 3px #33180d;box-shadow:inset 0 0 0 1px #b98c62;}
 .rrr_cr:active{background-color:#9d6741;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9d6741), to(#c38b66));background:-moz-linear-gradient(#9d6741, #c38b66);background:linear-gradient(#9d6741, #c38b66);border:solid 1px #422213;box-shadow:inset 0 10px 15px 0 #7b502e;}
</style>

<a href="#" class="wsa_6s rrr_cr">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_fo{background-color:#4a7746;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#4a7746), to(#335d30));background:-moz-linear-gradient(#4a7746, #335d30);background:linear-gradient(#4a7746, #335d30);border:solid 1px #1b3013;border-bottom:solid 3px #0a1608;box-shadow:inset 0 0 0 1px #53864f;color:#142413;text-shadow:0 1px 0 #4b7b47;}
 .rrr_fo:hover{background-color:#335d30;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#335d30), to(#4a7746));background:-moz-linear-gradient(#335d30, #4a7746);background:linear-gradient(#335d30, #4a7746);border:solid 1px #1b3013;border-bottom:solid 3px #0a1608;box-shadow:inset 0 0 0 1px #53864f;}
 .rrr_fo:active{background-color:#335d30;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#335d30), to(#4a7746));background:-moz-linear-gradient(#335d30, #4a7746);background:linear-gradient(#335d30, #4a7746);border:solid 1px #1b3013;box-shadow:inset 0 10px 15px 0 #294a16;}
</style>

<a href="#" class="wsa_6s rrr_fo">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_dr{background-color:#f1a4c1;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f1a4c1), to(#e675a0));background:-moz-linear-gradient(#f1a4c1, #e675a0);background:linear-gradient(#f1a4c1, #e675a0);border:solid 1px #e98eb0;border-bottom:solid 3px #cc4a79;box-shadow:inset 0 0 0 1px #f6c2d7;color:#fff;text-shadow:0 1px 0 #d64570;}
 .rrr_dr:hover{background-color:#e675a0;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e675a0), to(#f1a4c1));background:-moz-linear-gradient(#e675a0, #f1a4c1);background:linear-gradient(#e675a0, #f1a4c1);border:solid 1px #e98eb0;border-bottom:solid 3px #cc4a79;box-shadow:inset 0 0 0 1px #f6c2d7;}
 .rrr_dr:active{background-color:#e675a0;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e675a0), to(#f1a4c1));background:-moz-linear-gradient(#e675a0, #f1a4c1);background:linear-gradient(#e675a0, #f1a4c1);border:solid 1px #e98eb0;box-shadow:inset 0 10px 15px 0 #e05285;}
</style>

<a href="#" class="wsa_6s rrr_dr">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_tr{background-color:#9fd6fa;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9fd6fa), to(#6bb9f7));background:-moz-linear-gradient(#9fd6fa, #6bb9f7);background:linear-gradient(#9fd6fa, #6bb9f7);border:solid 1px #72bdf4;border-bottom:solid 3px #4a9de1;box-shadow:inset 0 0 0 1px #bfe4fc;color:#fff;text-shadow:0 1px 0 #4598f3;}
 .rrr_tr:hover{background-color:#6bb9f7;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#6bb9f7), to(#9fd6fa));background:-moz-linear-gradient(#6bb9f7, #9fd6fa);background:linear-gradient(#6bb9f7, #9fd6fa);border:solid 1px #72bdf4;border-bottom:solid 3px #4a9de1;box-shadow:inset 0 0 0 1px #bfe4fc;}
 .rrr_tr:active{background-color:#6bb9f7;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#6bb9f7), to(#9fd6fa));background:-moz-linear-gradient(#6bb9f7, #9fd6fa);background:linear-gradient(#6bb9f7, #9fd6fa);border:solid 1px #72bdf4;box-shadow:inset 0 10px 15px 0 #50aaf3;}
</style>

<a href="#" class="wsa_6s rrr_tr">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_fa{background-color:#99b6df;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#99b6df), to(#638ec8));background:-moz-linear-gradient(#99b6df, #638ec8);background:linear-gradient(#99b6df, #638ec8);border:solid 1px #6d94ce;border-bottom:solid 3px #3867ac;box-shadow:inset 0 0 0 1px #bbcfeb;color:#fff;text-shadow:0 1px 0 #3c61ab;}
 .rrr_fa:hover{background-color:#638ec8;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#638ec8), to(#99b6df));background:-moz-linear-gradient(#638ec8, #99b6df);background:linear-gradient(#638ec8, #99b6df);border:solid 1px #6d94ce;border-bottom:solid 3px #3867ac;box-shadow:inset 0 0 0 1px #bbcfeb;}
 .rrr_fa:active{background-color:#638ec8;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#638ec8), to(#99b6df));background:-moz-linear-gradient(#638ec8, #99b6df);background:linear-gradient(#638ec8, #99b6df);border:solid 1px #6d94ce;box-shadow:inset 0 10px 15px 0 #4176c4;}
</style>

<a href="#" class="wsa_6s rrr_fa">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_lo{background-color:#f3c1e6;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f3c1e6), to(#de66c0));background:-moz-linear-gradient(#f3c1e6, #de66c0);background:linear-gradient(#f3c1e6, #de66c0);border:solid 1px #cd5daf;border-bottom:solid 3px #ce5eb0;box-shadow:inset 0 0 0 1px #e998d3;color:#fff;text-shadow:0 1px 0 #ce5eb0;}
 .rrr_lo:hover{background-color:#de66c0;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#de66c0), to(#f3c1e6));background:-moz-linear-gradient(#de66c0, #f3c1e6);background:linear-gradient(#de66c0, #f3c1e6);border:solid 1px #cd5daf;border-bottom:solid 3px #ce5eb0;box-shadow:inset 0 0 0 1px #e998d3;}
 .rrr_lo:active{background-color:#de66c0;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#de66c0), to(#f3c1e6));background:-moz-linear-gradient(#de66c0, #f3c1e6);background:linear-gradient(#de66c0, #f3c1e6);border:solid 1px #cd5daf;box-shadow:inset 0 10px 15px 0 #ce5eb0;}
</style>

<a href="#" class="wsa_6s rrr_lo">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_x{background-color:#c4e125;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#c4e125), to(#88a819));background:-moz-linear-gradient(#c4e125, #88a819);background:linear-gradient(#c4e125, #88a819);border:solid 1px #829c15;border-bottom:solid 3px #819d15;box-shadow:inset 0 0 0 1px #c6da7b;color:#fff;text-shadow:0 1px 0 #819d15;}
 .rrr_x:hover{background-color:#88a819;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#88a819), to(#c4e125));background:-moz-linear-gradient(#88a819, #c4e125);background:linear-gradient(#88a819, #c4e125);border:solid 1px #829c15;border-bottom:solid 3px #819d15;box-shadow:inset 0 0 0 1px #c6da7b;}
 .rrr_x:active{background-color:#88a819;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#88a819), to(#c4e125));background:-moz-linear-gradient(#88a819, #c4e125);background:linear-gradient(#88a819, #c4e125);border:solid 1px #829c15;box-shadow:inset 0 10px 15px 0 #819d15;}
</style>

<a href="#" class="wsa_6s rrr_x">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_de{background-color:#729e85;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#729e85), to(#486d5c));background:-moz-linear-gradient(#729e85, #486d5c);background:linear-gradient(#729e85, #486d5c);border:solid 1px #236036;border-bottom:solid 3px #225f33;box-shadow:inset 0 0 0 1px #90a59c;color:#fff;text-shadow:0 1px 0 #225f33;}
 .rrr_de:hover{background-color:#486d5c;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#486d5c), to(#729e85));background:-moz-linear-gradient(#486d5c, #729e85);background:linear-gradient(#486d5c, #729e85);border:solid 1px #236036;border-bottom:solid 3px #225f33;box-shadow:inset 0 0 0 1px #90a59c;}
 .rrr_de:active{background-color:#486d5c;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#486d5c), to(#729e85));background:-moz-linear-gradient(#486d5c, #729e85);background:linear-gradient(#486d5c, #729e85);border:solid 1px #236036;box-shadow:inset 0 10px 15px 0 #225f33;}
</style>

<a href="#" class="wsa_6s rrr_de">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_ds{background-color:#f97779;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f97779), to(#ce2424));background:-moz-linear-gradient(#f97779, #ce2424);background:linear-gradient(#f97779, #ce2424);border:solid 1px #be2424;border-bottom:solid 3px #bd2524;box-shadow:inset 0 0 0 1px #e67e7b;color:#fff;text-shadow:0 1px 0 #bd2524;}
 .rrr_ds:hover{background-color:#ce2424;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));background:-moz-linear-gradient(#ce2424, #f97779);background:linear-gradient(#ce2424, #f97779);border:solid 1px #be2424;border-bottom:solid 3px #bd2524;box-shadow:inset 0 0 0 1px #e67e7b;}
 .rrr_ds:active{background-color:#ce2424;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ce2424), to(#f97779));background:-moz-linear-gradient(#ce2424, #f97779);background:linear-gradient(#ce2424, #f97779);border:solid 1px #be2424;box-shadow:inset 0 10px 15px 0 #bd2524;}
</style>

<a href="#" class="wsa_6s rrr_ds">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_rss{background-color:#f6c696;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#f6c696), to(#e9893d));background:-moz-linear-gradient(#f6c696, #e9893d);background:linear-gradient(#f6c696, #e9893d);border:solid 1px #a1681b;border-bottom:solid 3px #a1671d;box-shadow:inset 0 0 0 1px #f1bb8f;color:#fff;text-shadow:0 1px 0 #a1671d;}
 .rrr_rss:hover{background-color:#e9893d;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e9893d), to(#f6c696));background:-moz-linear-gradient(#e9893d, #f6c696);background:linear-gradient(#e9893d, #f6c696);border:solid 1px #a1681b;border-bottom:solid 3px #a1671d;box-shadow:inset 0 0 0 1px #f1bb8f;}
 .rrr_rss:active{background-color:#e9893d;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e9893d), to(#f6c696));background:-moz-linear-gradient(#e9893d, #f6c696);background:linear-gradient(#e9893d, #f6c696);border:solid 1px #a1681b;box-shadow:inset 0 10px 15px 0 #a1671d;}
</style>

<a href="#" class="wsa_6s rrr_rss">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_6s::before{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:#959595 0 2px 5px;-moz-box-shadow:#959595 0 2px 5px;border-radius:3px;box-shadow:#959595 0 2px 5px;content:"";display:block;height:100%;left:0;padding:2px 0 0;position:absolute;top:0;width:100%;}
 .wsa_6s:active::before{padding:1px 0 0;}
 .wsa_6s{-moz-box-shadow:inset 0 0 0 1px #63ad0d;-webkit-box-shadow:inset 0 0 0 1px #63ad0d;-moz-border-radius:3px;-webkit-border-radius:3px;background:#eee;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e2e2e2));background:-moz-linear-gradient(#eee, #e2e2e2);background:linear-gradient(#eee, #e2e2e2);border:solid 1px #d0d0d0;border-bottom:solid 3px #b2b1b1;border-radius:3px;box-shadow:inset 0 0 0 1px #f5f5f5;color:#555;display:inline-block;font:bold 16px Arial, Helvetica, Clean, sans-serif;margin:40px;padding:10px 50px;position:relative;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fafafa;}
 .wsa_6s:hover{background:#e4e4e4;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e4e4e4), to(#ededed));background:-moz-linear-gradient(#e4e4e4, #ededed);background:linear-gradient(#e4e4e4, #ededed);border:solid 1px #c2c2c2;border-bottom:solid 3px #b2b1b1;box-shadow:inset 0 0 0 1px #efefef;}
 .wsa_6s:active{background:#dfdfdf;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#dfdfdf), to(#e3e3e3));background:-moz-linear-gradient(#dfdfdf, #e3e3e3);background:linear-gradient(#dfdfdf, #e3e3e3);border:solid 1px #959595;box-shadow:inset 0 10px 15px 0 #c4c4c4;top:2px;}
 .rrr_y{background-color:#be95b7;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#be95b7), to(#5f396a));background:-moz-linear-gradient(#be95b7, #5f396a);background:linear-gradient(#be95b7, #5f396a);border:solid 1px #4b2a55;border-bottom:solid 3px #4d2955;box-shadow:inset 0 0 0 1px #9c83a1;color:#fff;text-shadow:0 1px 0 #4d2955;}
 .rrr_y:hover{background-color:#5f396a;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#5f396a), to(#be95b7));background:-moz-linear-gradient(#5f396a, #be95b7);background:linear-gradient(#5f396a, #be95b7);border:solid 1px #4b2a55;border-bottom:solid 3px #4d2955;box-shadow:inset 0 0 0 1px #9c83a1;}
 .rrr_y:active{background-color:#5f396a;background:-webkit-gradient(linear, 0 0, 0 bottom, from(#5f396a), to(#be95b7));background:-moz-linear-gradient(#5f396a, #be95b7);background:linear-gradient(#5f396a, #be95b7);border:solid 1px #4b2a55;box-shadow:inset 0 10px 15px 0 #4d2955;}
</style>

<a href="#" class="wsa_6s rrr_y">Кнопка</a>

Нажмите на кнопку, чтобы получить код CSS.

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr13{background-color:#77AD0C;}
</style>

<a href="#" class="wsa_7s rrr13">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr14{background-color:#669900;}
</style>

<a href="#" class="wsa_7s rrr14">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr15{background-color:#336600;}
</style>

<a href="#" class="wsa_7s rrr15">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr16{background-color:#0066cc;}
</style>

<a href="#" class="wsa_7s rrr16">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr17{background-color:#333399;}
</style>

<a href="#" class="wsa_7s rrr17">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr18{background-color:#663399;}
</style>

<a href="#" class="wsa_7s rrr18">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr19{background-color:#993399;}
</style>

<a href="#" class="wsa_7s rrr19">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr20{background-color:#EA4C89;}
</style>

<a href="#" class="wsa_7s rrr20">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr21{background-color:#CC3333;}
</style>

<a href="#" class="wsa_7s rrr21">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr22{background-color:#CC0000;}
</style>

<a href="#" class="wsa_7s rrr22">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr23{background-color:#990000;}
</style>

<a href="#" class="wsa_7s rrr23">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr24{background-color:#cc6633;}
</style>

<a href="#" class="wsa_7s rrr24">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr25{background-color:#FF6600;}
</style>

<a href="#" class="wsa_7s rrr25">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr26{background-color:#FF9900;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr26:hover,.rrr26:focus,.rrr26:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr26">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr27{background-color:#F9BB11;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr27:hover,.rrr27:focus,.rrr27:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr27">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr28{background-color:#FFCC33;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr28:hover,.rrr28:focus,.rrr28:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr28">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr2{background-color:#b2b2b2;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr2:hover,.rrr2:focus,.rrr2:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr2">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr3{background-color:#a1a1a1;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr3:hover,.rrr3:focus,.rrr3:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr3">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr4{background-color:#9b9b9b;text-shadow:0 -1px 1px rgba(250, 250, 250, 0.7);color:#434343;}
 .rrr4:hover,.rrr4:focus,.rrr4:active{color:#222;transition:none 0s ease 0s;}
</style>

<a href="#" class="wsa_7s rrr4">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr5{background-color:#999;}
</style>

<a href="#" class="wsa_7s rrr5">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr6{background-color:#8b8b8b;}
</style>

<a href="#" class="wsa_7s rrr6">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr7{background-color:#7b7b7b;}
</style>

<a href="#" class="wsa_7s rrr7">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr8{background-color:#6b6b6b;}
</style>

<a href="#" class="wsa_7s rrr8">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr9{background-color:#666;}
</style>

<a href="#" class="wsa_7s rrr9">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr10{background-color:#5e5e5e;}
</style>

<a href="#" class="wsa_7s rrr10">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr11{background-color:#5b5b5b;}
</style>

<a href="#" class="wsa_7s rrr11">Кнопка</a>

Кнопка

<style type="text/css">
 .wsa_7s{display:inline-block;margin:40px;padding:10px 40px 11px;color:#fff;width:auto;height:auto;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;text-decoration:none;text-shadow:0 -1px 1px rgba(0,0,0,0.50);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid rgba(0,0,0,0.50);border-top:1px solid rgba(0,0,0,0.001);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);cursor:pointer;}
 .wsa_7s:hover{-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;}
 .wsa_7s:active{padding:11px 40px 10px;border-top:1px solid rgba(0,0,0,0.55);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 2px 1px rgba(255,255,255,0.50), inset 0px 1px 4px rgba(0,0,0,0.35), inset 0px -14px 14px rgba(255,255,255,0.10);-webkit-animation:none;cursor:pointer !important;}
 @-webkit-keyframes glow{0%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.35);}100%{box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-moz-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-o-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);-ms-box-shadow:0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.18);}}
 .rrr12{background-color:#4b4b4b;}
</style>

<a href="#" class="wsa_7s rrr12">Кнопка</a>

Дата публикации: 28.07.2018

Комментарии

Вадим

1 августа 2018 10:27

Здравствуйте!
Я с проблемой по кнопке из серии Кнопки css с анимацией: на локалке выводится и работает кнопка отлично, а на сайте при наведение ничего не происходит.
Единственное что я изменил, это добавил в ваш код css для кнопки свой дополнительный блок.
Подскажите, что нужно добавить в стили для моего div, чтобы кнопка заработала. Спасибо!

Admin

1 августа 2018 12:16

Добрый день!
Скорее всего эта проблема связана с параметром z-index, попробуйте для вашего div добавить z-index:0; в css.

Вадим

2 августа 2018 08:42

Благодарю, кнопка заработала.
И попутно, у меня на сайте в кнопке css ссылка при наведении и нажатии приобретает совершенно другой цвет и появляется подчёркивание.
Я понимаю, что это связано с моими правилами на сайте в стилях, а как это исправить?
И спасибо за качественные примеры кнопок на css.

Admin

2 августа 2018 09:29

Вам необходимо сделать переопределение параметров для ссылок в кнопке.
То есть задать новые свойства и прописать обязательно ниже существующих записей.
К примеру, ваша кнопка на css имеет такой код:
<a href="#" class="bucn_3_2s">Кнопка</a>
и вам нужно в стилях прописать:

cssCOPY
<style>
  .bucn_3_2s:hover,.bucn_3_2s:active,.bucn_3_2s:focus {
	color: #000;		/* Указываете нужный цвет */
	text-decoration: none;  /* Убираете подчёркивание */
  }
</style>

Натали

3 августа 2018 12:02

Спасибо за крутую подборку кнопок:))
Подскажи пожалуйста, как в примерах кнопок на css с эффектом мигания при наведении убрать эффект мигания?
В этом варианте есть нужная расцветка кнопки для моего сайта и я хочу без всяких эффектов.
Заранее, благодарна!

Admin

3 августа 2018 12:38

Удалите правило в css @-webkit-keyframes с его значениями, и удалите для класса .wsa_7s:hover эту запись:
-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;
Эффект при наведении для кнопки пропадёт.

Добавить комментарий

3D объёмные кнопки css эффект при нажатии

Кнопки css с анимацией

Анимированные кнопки на css

Кнопки css с эффектом мигания при наведении