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

Кнопки css - большая подборка из 142 анимированных кнопок в примерах, выполненных только на css.
Кнопки css имеют классные эффекты при нажатии и наведении. Красивая анимация кнопок будет стильно отобоажаться на странице html.
Для удобства все кнопки снабжены кодом css, - нажмите на любую из них, скопируйте код и сразу вставьте кнопку к себе на страницу.
3D объёмные кнопки на css - эффект при нажатии.
Нажмите на кнопку, чтобы получить код CSS.
<style type="text/css"> .tesuen{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{background-color:#2ca0ca;background-image:linear-gradient(bottom, #2ca0ca 0%, #3eb8e5 100%);background-image:-o-linear-gradient(bottom, #2ca0ca 0%, #3eb8e5 100%);background-image:-moz-linear-gradient(bottom, #2ca0ca 0%, #3eb8e5 100%);background-image:-webkit-linear-gradient(bottom, #2ca0ca 0%, #3eb8e5 100%);background-image:-ms-linear-gradient(bottom, #2ca0ca 0%, #3eb8e5 100%);background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0, #2ca0ca), color-stop(1, #3eb8e5));-webkit-box-shadow:0 6px 0 #156785;-moz-box-shadow:0 6px 0 #156785;-o-box-shadow:0 6px 0 #156785;box-shadow:0 6px 0 #156785;} .tesuen::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::before{background-color:#072239;} .tesuen:active{background-color:#2ca0ca;-webkit-box-shadow:0 1px 0 #a8f9f9 inset, 0 -1px 0 #156785 inset;-moz-box-shadow:0 1px 0 #a8f9f9 inset, 0 -1px 0 #156785 inset;-o-box-shadow:0 1px 0 #a8f9f9 inset, 0 -1px 0 #156785 inset;box-shadow:0 1px 0 #a8f9f9 inset, 0 -1px 0 #156785 inset;top:7px;} .tesuen:active::before{top:-2px;} .tesuen:active,.tesuen:hover,.tesuen:focus{color:#fff;text-shadow:0 1px 2px #333;} </style> <a href="#" class="tesuen">Кнопка</a>
<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/uploads/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/uploads/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/uploads/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 с анимацией.
Нажмите на кнопку, чтобы получить код 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>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_2_s{text-decoration:none;outline:none;display:inline-block;padding:12px 40px;margin:10px 20px;font-family:'Montserrat', sans-serif;font-size:24px;font-weight:300;color:#fff;transition:.5s;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-position:100% 0;background-size:200% 200%;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 2px #333;-moz-box-shadow:0 0 2px #333;-o-box-shadow:0 0 2px #333;box-shadow:0 0 2px #333;background-color:#002878;background-image:linear-gradient(45deg, #002878 0%, #33d9de 50%, #002878 100%);background-image:-o-linear-gradient(45deg, #002878 0%, #33d9de 50%, #002878 100%);background-image:-moz-linear-gradient(45deg, #002878 0%, #33d9de 50%, #002878 100%);background-image:-webkit-linear-gradient(45deg, #002878 0%, #33d9de 50%, #002878 100%);background-image:-ms-linear-gradient(45deg, #002878 0%, #33d9de 50%, #002878 100%);} .bucn_2_s:hover{-webkit-box-shadow:0 0 4px #333;-moz-box-shadow:0 0 4px #333;-o-box-shadow:0 0 4px #333;box-shadow:0 0 4px #333;background-position:0 0;} .bucn_2_s:hover,.bucn_2_s:active,.bucn_2_s:focus{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_2_s">Наведи на кнопку</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_2_z{text-decoration:none;outline:none;display:inline-block;padding:12px 40px;margin:10px 20px;font-family:'Montserrat', sans-serif;font-size:24px;font-weight:300;color:#fff;transition:.5s;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-position:100% 0;background-size:200% 200%;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 2px #333;-moz-box-shadow:0 0 2px #333;-o-box-shadow:0 0 2px #333;box-shadow:0 0 2px #333;background-color:#286700;background-image:linear-gradient(45deg, #286700 0%, #afee5e 50%, #286700 100%);background-image:-o-linear-gradient(45deg, #286700 0%, #afee5e 50%, #286700 100%);background-image:-moz-linear-gradient(45deg, #286700 0%, #afee5e 50%, #286700 100%);background-image:-webkit-linear-gradient(45deg, #286700 0%, #afee5e 50%, #286700 100%);background-image:-ms-linear-gradient(45deg, #286700 0%, #afee5e 50%, #286700 100%);} .bucn_2_z:hover{-webkit-box-shadow:0 0 4px #333;-moz-box-shadow:0 0 4px #333;-o-box-shadow:0 0 4px #333;box-shadow:0 0 4px #333;background-position:0 0;} .bucn_2_z:hover,.bucn_2_z:active,.bucn_2_z:focus{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_2_z">Наведи на кнопку</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_2_r{text-decoration:none;outline:none;display:inline-block;padding:12px 40px;margin:10px 20px;font-family:'Montserrat', sans-serif;font-size:24px;font-weight:300;color:#fff;transition:.5s;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;background-position:100% 0;background-size:200% 200%;text-shadow:0 1px 1px #555;-webkit-box-shadow:0 0 2px #333;-moz-box-shadow:0 0 2px #333;-o-box-shadow:0 0 2px #333;box-shadow:0 0 2px #333;background-color:#630000;background-image:linear-gradient(45deg, #630000 0%, #ff7b7b 50%, #630000 100%);background-image:-o-linear-gradient(45deg, #630000 0%, #ff7b7b 50%, #630000 100%);background-image:-moz-linear-gradient(45deg, #630000 0%, #ff7b7b 50%, #630000 100%);background-image:-webkit-linear-gradient(45deg, #630000 0%, #ff7b7b 50%, #630000 100%);background-image:-ms-linear-gradient(45deg, #630000 0%, #ff7b7b 50%, #630000 100%);} .bucn_2_r:hover{-webkit-box-shadow:0 0 4px #333;-moz-box-shadow:0 0 4px #333;-o-box-shadow:0 0 4px #333;box-shadow:0 0 4px #333;background-position:0 0;} .bucn_2_r:hover,.bucn_2_r:active,.bucn_2_r:focus{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_2_r">Наведи на кнопку</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_s{text-decoration:none;outline:none;display:inline-block;position:relative;padding:15px 30px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#188cb6;background-color:#fff;border:1px solid #188cb6;} .bucn_3_s:before{content:"";position:absolute;left:0;top:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#0b7fa9;background-image:linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-o-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-moz-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-webkit-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-ms-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);} .bucn_3_s:hover:before{bottom:0%;top:auto;height:100%;} .bucn_3_s:hover,.bucn_3_s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_s">Наведи на кнопку</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_z{text-decoration:none;outline:none;display:inline-block;position:relative;padding:15px 30px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#488700;background-color:#fff;border:1px solid #488700;} .bucn_3_z:before{content:"";position:absolute;left:0;top:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#357400;background-image:linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-o-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-moz-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-webkit-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-ms-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);} .bucn_3_z:hover:before{bottom:0%;top:auto;height:100%;} .bucn_3_z:hover,.bucn_3_z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_z">Наведи на кнопку</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_r{text-decoration:none;outline:none;display:inline-block;position:relative;padding:15px 30px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#9e0e0e;background-color:#fff;border:1px solid #9e0e0e;} .bucn_3_r:before{content:"";position:absolute;left:0;top:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#9e0000;background-image:linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-o-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-moz-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-webkit-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-ms-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);} .bucn_3_r:hover:before{bottom:0%;top:auto;height:100%;} .bucn_3_r:hover,.bucn_3_z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_r">Наведи на кнопку</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_s,.bucn_4_s:before{-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} .bucn_4_s{text-decoration:none;outline:none;display:inline-block;position:relative;padding:10px 70px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#188cb6;background-color:#fff;background-image:linear-gradient(135deg, #0b7fa9, #fff, #fff, #0b7fa9);background-image:-o-linear-gradient(135deg, #0b7fa9, #fff, #fff, #0b7fa9);background-image:-moz-linear-gradient(135deg, #0b7fa9, #fff, #fff, #0b7fa9);background-image:-webkit-linear-gradient(135deg, #0b7fa9, #fff, #fff, #0b7fa9);background-image:-ms-linear-gradient(135deg, #0b7fa9, #fff, #fff, #0b7fa9);border:1px solid #188cb6;} .bucn_4_s:before{content:"";position:absolute;left:0;bottom:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#0b7fa9;background-image:linear-gradient(135deg, #fff, #0b7fa9, #0b7fa9, #fff);background-image:-o-linear-gradient(135deg, #fff, #0b7fa9, #0b7fa9, #fff);background-image:-moz-linear-gradient(135deg, #fff, #0b7fa9, #0b7fa9, #fff);background-image:-webkit-linear-gradient(135deg, #fff, #0b7fa9, #0b7fa9, #fff);background-image:-ms-linear-gradient(135deg, #fff, #0b7fa9, #0b7fa9, #fff);} .bucn_4_s:hover:before{top:0%;bottom:auto;height:100%;} .bucn_4_s:hover,.bucn_4_s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_z,.bucn_4_z:before{-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} .bucn_4_z{text-decoration:none;outline:none;display:inline-block;position:relative;padding:10px 70px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#488700;background-color:#fff;background-image:linear-gradient(135deg, #357400, #fff, #fff, #357400);background-image:-o-linear-gradient(135deg, #357400, #fff, #fff, #357400);background-image:-moz-linear-gradient(135deg, #357400, #fff, #fff, #357400);background-image:-webkit-linear-gradient(135deg, #357400, #fff, #fff, #357400);background-image:-ms-linear-gradient(135deg, #357400, #fff, #fff, #357400);border:1px solid #488700;} .bucn_4_z:before{content:"";position:absolute;left:0;bottom:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#357400;background-image:linear-gradient(135deg, #fff, #357400, #357400, #fff);background-image:-o-linear-gradient(135deg, #fff, #357400, #357400, #fff);background-image:-moz-linear-gradient(135deg, #fff, #357400, #357400, #fff);background-image:-webkit-linear-gradient(135deg, #fff, #357400, #357400, #fff);background-image:-ms-linear-gradient(135deg, #fff, #357400, #357400, #fff);} .bucn_4_z:hover:before{top:0%;bottom:auto;height:100%;} .bucn_4_z:hover,.bucn_4_z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_r,.bucn_4_r:before{-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;} .bucn_4_r{text-decoration:none;outline:none;display:inline-block;position:relative;padding:10px 70px;font-size:18px;font-family:'Montserrat', sans-serif;text-transform:uppercase;overflow:hidden;letter-spacing:2px;transition:.8s cubic-bezier(.165,.84,.44,1);-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;z-index:1;color:#9e0e0e;background-color:#fff;background-image:linear-gradient(135deg, #b30213, #fff, #fff, #b30213);background-image:-o-linear-gradient(135deg, #b30213, #fff, #fff, #b30213);background-image:-moz-linear-gradient(135deg, #b30213, #fff, #fff, #b30213);background-image:-webkit-linear-gradient(135deg, #b30213, #fff, #fff, #b30213);background-image:-ms-linear-gradient(135deg, #b30213, #fff, #fff, #b30213);border:1px solid #9e0e0e;} .bucn_4_r:before{content:"";position:absolute;left:0;bottom:0;height:0;width:100%;z-index:-1;color:#fff;transition:.8s cubic-bezier(.165,.84,.44,1);background-color:#b30213;background-image:linear-gradient(135deg, #fff, #b30213, #b30213, #fff);background-image:-o-linear-gradient(135deg, #fff, #b30213, #b30213, #fff);background-image:-moz-linear-gradient(135deg, #fff, #b30213, #b30213, #fff);background-image:-webkit-linear-gradient(135deg, #fff, #b30213, #b30213, #fff);background-image:-ms-linear-gradient(135deg, #fff, #b30213, #b30213, #fff);} .bucn_4_r:hover:before{top:0%;bottom:auto;height:100%;} .bucn_4_r:hover,.bucn_4_r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_2s{background-color:#fff;border:1px solid #188cb6;color:#188cb6;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_2s::before{color:#fff;content:"";right:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#0b7fa9;background-image:linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-o-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-moz-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-webkit-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);background-image:-ms-linear-gradient(90deg, #7ff9fd, #0b7fa9, #0b7fa9, #7ff9fd);} .bucn_3_2s:hover::before{left:0;right:auto;width:100%;} .bucn_3_2s:hover,.bucn_3_2s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_2s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_2z{background-color:#fff;border:1px solid #488700;color:#488700;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_2z::before{color:#fff;content:"";right:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#357400;background-image:linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-o-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-moz-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-webkit-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);background-image:-ms-linear-gradient(90deg, #f3ffab, #357400, #357400, #f3ffab);} .bucn_3_2z:hover::before{left:0;right:auto;width:100%;} .bucn_3_2z:hover,.bucn_3_2z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_2z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_2r{background-color:#fff;border:1px solid #9e0e0e;color:#9e0e0e;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_2r::before{color:#fff;content:"";right:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#9e0000;background-image:linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-o-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-moz-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-webkit-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);background-image:-ms-linear-gradient(90deg, #ffd6d6, #9e0000, #9e0000, #ffd6d6);} .bucn_3_2r:hover::before{left:0;right:auto;width:100%;} .bucn_3_2r:hover,.bucn_3_2r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_2r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_2s{background-color:#fff;border:1px solid #0b7fa9;color:#0b7fa9;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_2s::before{color:#fff;content:"";left:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#0b7fa9;} .bucn_4_2s:hover::before{left:auto;right:0;width:100%;} .bucn_4_2s:hover,.bucn_4_2s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_2s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_2z{background-color:#fff;border:1px solid #488700;color:#488700;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_2z::before{color:#fff;content:"";left:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#357400;} .bucn_4_2z:hover::before{left:auto;right:0;width:100%;} .bucn_4_2z:hover,.bucn_4_2z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_2z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_2r{background-color:#fff;border:1px solid #9e0e0e;color:#9e0e0e;font-size:18px;font-family:verdana;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_2r::before{color:#fff;content:"";left:0;top:0;height:100%;width:0;position:absolute;transition:all 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0s;z-index:-1;background-color:#b30213;} .bucn_4_2r:hover::before{left:auto;right:0;width:100%;} .bucn_4_2r:hover,.bucn_4_2r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_2r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_3s{color:#188cb6;border:1px solid #188cb6;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_3s::after{background-color:#0b7fa9;left:50%;top:50%;height:0;width:150%;transform:translateY(-50%) translateX(-50%) rotate(90deg);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_3s:hover::after{height:700% !important;opacity:1;} .bucn_3_3s:hover,.bucn_3_3s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_3s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_3z{color:#488700;border:1px solid #488700;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_3z::after{background-color:#357400;left:50%;top:50%;height:0;width:150%;transform:translateY(-50%) translateX(-50%) rotate(90deg);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_3z:hover::after{height:700% !important;opacity:1;} .bucn_3_3z:hover,.bucn_3_3z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_3z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_3r{color:#9e0e0e;border:1px solid #9e0e0e;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_3r::after{background-color:#d24d57;left:50%;top:50%;height:0;width:150%;transform:translateY(-50%) translateX(-50%) rotate(90deg);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_3r:hover::after{height:700% !important;opacity:1;} .bucn_3_3r:hover,.bucn_3_3r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_3r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_4s{color:#188cb6;border:1px solid #188cb6;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_4s::after{background-color:#0b7fa9;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_4s:hover::after{height:140%;opacity:1;} .bucn_3_4s:hover,.bucn_3_4s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_4s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_4z{color:#488700;border:1px solid #488700;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_4z::after{background-color:#357400;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_4z:hover::after{height:140%;opacity:1;} .bucn_3_4z:hover,.bucn_3_4z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_4z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_3_4r{color:#9e0e0e;border:1px solid #9e0e0e;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_3_4r::after{background-color:#d24d57;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%);opacity:0.5;position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_3_4r:hover::after{height:140%;opacity:1;} .bucn_3_4r:hover,.bucn_3_4r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_3_4r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_3s{color:#188cb6;border:1px solid #188cb6;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_3s::after{background-color:#0b7fa9;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_3s:hover::after{height:450%;opacity:1;} .bucn_4_3s:hover,.bucn_4_3s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_3s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_3z{color:#488700;border:1px solid #488700;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_3z::after{background-color:#357400;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_3z:hover::after{height:450%;opacity:1;} .bucn_4_3z:hover,.bucn_4_3z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_3z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_3r{color:#9e0e0e;border:1px solid #9e0e0e;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_3r::after{background-color:#d24d57;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_3r:hover::after{height:450%;opacity:1;} .bucn_4_3r:hover,.bucn_4_3r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_3r">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_4s{color:#188cb6;border:1px solid #188cb6;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_4s::after{background-color:#0b7fa9;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(-25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_4s:hover::after{height:450%;opacity:1;} .bucn_4_4s:hover,.bucn_4_4s:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_4s">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_4z{color:#488700;border:1px solid #488700;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_4z::after{background-color:#357400;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(-25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_4z:hover::after{height:450%;opacity:1;} .bucn_4_4z:hover,.bucn_4_4z:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_4z">Кнопка</a></div>
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_4r{color:#9e0e0e;border:1px solid #9e0e0e;background-color:#fff;font-size:18px;font-family:verdana;overflow:hidden;display:inline-block;outline:medium none;padding:10px 70px;position:relative;text-decoration:none;z-index:1;-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;} .bucn_4_4r::after{background-color:#d24d57;left:50%;top:50%;height:0;width:150%;transform:translateX(-50%) translateY(-50%) rotate(-25deg);position:absolute;content:"";transition:all 0.75s ease 0s;z-index:-1;} .bucn_4_4r:hover::after{height:450%;opacity:1;} .bucn_4_4r:hover,.bucn_4_4r:active{color:#fff;text-shadow:0 1px 2px #333;} *::before, *::after{box-sizing:border-box;} </style> <div class="avd_div"><a href="#" class="bucn_4_4r">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_5s{color:blue;border:2px solid blue;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_5s:before{background:blue;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_5s:hover{color:#fff;} .bucn_4_5s:before{top:100%;left:100%;transition:all .7s;} .bucn_4_5s:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_5s" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_5z{color:green;border:2px solid green;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_5z:before{background:green;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_5z:hover{color:#fff;} .bucn_4_5z:before{top:100%;left:100%;transition:all .7s;} .bucn_4_5z:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_5z" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_5r{color:crimson;border:2px solid crimson;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_5r:before{background:crimson;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_5r:hover{color:#fff;} .bucn_4_5r:before{top:100%;left:100%;transition:all .7s;} .bucn_4_5r:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_5r" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_6s{color:blue;border:2px solid blue;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_6s:before{background:blue;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_6s:hover{color:#fff;} .bucn_4_6s:before{left:-30px;bottom:100%;transition:all .7s;} .bucn_4_6s:hover:before{bottom:-50px;} </style> <div class="avd_div"><a class="bucn_4_6s" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_6z{color:green;border:2px solid green;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_6z:before{background:green;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_6z:hover{color:#fff;} .bucn_4_6z:before{left:-30px;bottom:100%;transition:all .7s;} .bucn_4_6z:hover:before{bottom:-50px;} </style> <div class="avd_div"><a class="bucn_4_6z" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_6r{color:crimson;border:2px solid crimson;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_6r:before{background:crimson;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_6r:hover{color:#fff;} .bucn_4_6r:before{left:-30px;bottom:100%;transition:all .7s;} .bucn_4_6r:hover:before{bottom:-50px;} </style> <div class="avd_div"><a class="bucn_4_6r" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_7s{color:blue;border:2px solid blue;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_7s:before{background:blue;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_7s:hover{color:#fff;} .bucn_4_7s:before{top:0;left:-200%;transition:all .7s;} .bucn_4_7s:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_7s" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_7z{color:green;border:2px solid green;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_7z:before{background:green;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_7z:hover{color:#fff;} .bucn_4_7z:before{top:0;left:-200%;transition:all .7s;} .bucn_4_7z:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_7z" href="#">Кнопка</a></div>
Кнопка
<style type="text/css"> .avd_div{margin:30px auto;padding:0;text-align:center;display:block;} .bucn_4_7r{color:crimson;border:2px solid crimson;text-decoration:none;display:inline-block;font-size:18px;width:130px;height:40px;line-height:40px;margin:20px;position:relative;overflow:hidden;transition:color .5s;-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;} .bucn_4_7r:before{background:crimson;content:"";position:absolute;z-index:-1;height:150px;width:200px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .bucn_4_7r:hover{color:#fff;} .bucn_4_7r:before{top:0;left:-200%;transition:all .7s;} .bucn_4_7r:hover:before{top:-30px;left:-30px;} </style> <div class="avd_div"><a class="bucn_4_7r" href="#">Кнопка</a></div>
Анимированные кнопки на css.
Нажмите на кнопку, чтобы получить код 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;} </style> <a href="#" class="wsa_6s">Кнопка</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 с эффектом мигания при наведении.
Нажмите на кнопку, чтобы получить код 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>