Кнопки CSS для блога (блок №01)

Собрал первый блок кнопок для блога (сайта). Надеюсь, что выложу очередной блок! Кнопки на любой вкус. Фишка - с CSS и не требуют изменений в шаблоне (теме) блога! Как видите - все работают на платформе "Blogger"!

Анимированная кнопка: "свечение текста"
HTML:	<input type="button" class="knopka01" value="демо"> или <a href="#" class="knopka01">демо</a>
CSS:	<style>.knopka01 { display: inline-block; width: 100px; height: 50px; line-height: 50px; font-size: 20px; text-align: center; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.8); outline: none; border: none; border-radius: 100px; background: rgb(28,107,114) radial-gradient(150% 100% at 50% 5px, rgba(255,255,255,.2), rgba(0,0,0,0)); box-shadow: inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, rgba(0,0,0,.8) 0 2px 5px -1px; color: rgb(0,79,86); user-select: none; } .knopka01:hover { color: rgb(0,59,66); cursor: pointer; } .knopka01:active { padding-bottom: 1px; box-shadow: inset rgba(0,0,0,1) 0 1px 3px, inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, 0 1px rgba(255,255,255,.08); color: rgb(128,207,214); }</style>
Результат:

Стиль кнопок с бликами
HTML:	<a href="#" class="button1">демо</a>
CSS:	<style>a.button1 { position: relative; color: white; font-weight: bold; text-decoration: none; text-shadow: -1px -1px #000; user-select: none; padding: .8em 2em; outline: none; background-color: #000; background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 50%); background-repeat: no-repeat; background-size: 200% 100%, auto; background-position: 200% 0, 0 0; box-shadow: rgba(0,0,0,.3) 0 2px 5px; } a.button1:active { top: 1px; box-shadow: none; } a.button1:hover { transition: .5s linear; background-position: -200% 0, 0 0; }</style>
Результат:	демо

Объёмная кнопка CSS
HTML:	<a href="#" class="button19">демо</a>
CSS:	<style>a.button19 { display: inline-block; font-weight: bold; color: #fff; text-decoration: none; text-shadow: 0 -1px rgba(0,0,0,.5); user-select: none; padding: .7em 1.5em; border: 1px solid rgb(80,32,0); border-radius: 5px; outline: none; background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%); box-shadow: 0 6px rgb(86,38,6), 0 3px 15px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5); transition: .2s; } .button19:hover { background: rgb(167,91,41) linear-gradient(rgb(126,69,31), rgb(167,91,41) 80%); } .button19:active { background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41)); box-shadow: 0 2px rgb(86,38,6), 0 1px 6px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5); -webkit-transform: translate(0, 4px); transform: translate(0, 4px); }</style>
Результат:	демо

Объёмная кнопка CSS
HTML:	<a href="#" class="button20">демо</a></td></tr>
CSS:	<style>a.button20 { position: relative; display: inline-block; font-weight: bold; color: #000; text-decoration: none; text-shadow: -2px 2px rgba(255,255,255,.3); line-height: 1.1; padding: .5em 3em .5em .6em; background: linear-gradient(#ecc92b, #fce25b); box-shadow: 0 0 0 1px #fce25b inset, -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -7px 9px 1px rgba(0,0,0,.4), -5px 11px 1px rgba(0,0,0,.2), -1px 13px 4px rgba(0,0,0,.2), 4px 16px 7px rgba(0,0,0,.3); transition: .4s; } a.button20:active { box-shadow: none; -webkit-transform: translate(-7px, 8px); transform: translate(-7px, 8px); } a.button20:after { content: ""; position: absolute; top: calc(50% - .6em/2); right: .6em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: .37em solid; border-top: none; border-left: none; width: .6em; height: .6em; box-shadow: inset -2px 2px rgba(255,255,255,.3); }</style>
Результат:	демо

Объёмная кнопка CSS
HTML:	<a href="#" class="button23">Объёмная</a>
CSS:	<style>a.button23 { display: inline-block; color: rgba(255,255,255,1.8); text-decoration: none; text-shadow: 0 0 1px rgb(3,43,58); padding: .8em 1.2em; background: #0E8BB8 linear-gradient(#0A5E7D, #0E8BB8); box-shadow: 0 15px 12px -12px rgb(0,0,0), 0 -2px 0 -1px rgb(20,110,140), 0 -4px 0 -2px rgb(18,108,138), 0 -6px 0 -3px rgb(16,106,136), 0 -8px 0 -4px rgb(14,104,134), 0 -10px 0 -5px rgb(12,102,132), 0 -12px 0 -6px rgb(10,100,130); } a.button23:active { margin: 0 calc(2px + 6px) 2px 0; padding: calc(.8em - 2px) calc(1.2em - 6px - 2px); border-left: 2px solid rgb(150,150,150); border-right: 2px solid rgb(150,150,150); border-bottom: 2px solid rgb(230,230,230); background: rgb(44,160,202) linear-gradient(rgb(62,184,229), rgb(44,160,202)); box-shadow: none; -webkit-transform: translate(6px, -6px); transform: translate(6px, -6px); }</style>
Результат:	демо

Вдавленная кнопка
HTML:	<a href="#" class="button22">Заказать</a>
CSS:	<style>a.button22 { position: relative; display: inline-block; width: 6em; height: 2.5em; line-height: 2.4em; vertical-align: middle; text-align: center; text-decoration: none; user-select: none; color: #000; outline: none; border: 1px solid rgba(110,121,128,.8); border-top-color: rgba(0,0,0,.3); border-radius: 5px; background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114)); box-shadow: 0 -1px rgba(10,21,28,.9) inset, 0 1px rgba(255,255,255,.5) inset; } a.button22:hover { background: linear-gradient(#d2dfea, #71828c); } a.button22:active { line-height: 2.6em; background: linear-gradient(#bac6cf, #c5d3de 20%, #71828c); box-shadow: 0 -1px rgba(255,255,255,.4) inset; } a.button22:before { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: -1; border-radius: 8px; background: linear-gradient(rgba(200,200,200,.5), rgba(240,240,240,.5)); }</style>
Результат:	демо

Выпуклая кнопка HTML
HTML:	<a href="#" class="boxShadow4">Заказать</a>
CSS:	<style>a.boxShadow4 { display: inline-block; font-size: 24px; font-weight: bold; color: rgba(255,255,255,.6); text-shadow: 1px 1px rgba(0,0,0,.3); text-decoration: none; padding: 20px; border-radius: 15px; background: rgb(10,120,10); box-shadow: inset 0 0 3px 1px rgba(0,0,0,.8), inset rgba(0,0,0,.3) -5px -5px 8px 5px, inset rgba(255,255,255,.5) 5px 5px 8px 5px, 1px 1px 1px rgba(255,255,255,.1), -2px -2px 5px rgba(0,0,0,.5); transition: .2s; } a.boxShadow4:hover { color: rgba(255,255,255,.9); background: rgb(20,130,20); } a.boxShadow4:active { background: rgb(0,110,0); box-shadow: inset 0 0 5px 3px rgba(0,0,0,.8), inset rgba(0,0,0,.3) -5px -5px 8px 5px, inset rgba(255,255,255,.5) 5px 5px 8px 5px, 1px 1px 1px rgba(255,255,255,.2), -2px -2px 5px rgba(0,0,0,.5); }</style>
Результат:	демо

3d кнопка CSS
HTML:	<a href="#" class="button2" tabindex="0">кнопка</a>
CSS:	<style>a.button2, a.button2:before { display: inline-block; font-size: 20px; color: #fff; text-decoration: none; padding: 8px 15px; border-radius: 100px; border: solid rgb(4,88,192); border-width: 3px 10px; outline: none; opacity: 1; transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s; } a.button2 { position: relative; padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px); border: 1px solid rgba(62,153,239,.5); background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%, rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%, rgb(44,135,232) 92%, #fff 97%, rgb(62,153,239) 99%) no-repeat; } a.button2:before { content: "УЗНАТЬ ПОДРОБНОСТИ"; position: absolute; bottom: -7px; left: -1px; width: calc(100% - (15px + 10px - 1px)*2); background: #fff linear-gradient(rgb(58,160,253), rgb(4,88,192) 60%, rgb(49,112,201)); box-shadow: 0 10px 18px rgba(0,0,0,.5); } a.button2:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } a.button2:hover:before { border-color: #0766d8; background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd); } a.button2:focus, a.button2:active { -webkit-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; visibility: hidden; transition: .4s; }</style>
Результат:	демоо

Объёмная кнопка CSS
HTML:	<a href="#" class="button">кнопка</a>
CSS:	<style>a.button { position: relative; display: inline-block; font-size: 24px; font-weight: bold; color: hsl(88, 70%, 30%); text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,.2) 0 .18em .15em; text-decoration: none; user-select: none; margin: .5em; padding: .5em .6em .4em .6em; border-radius: 8px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(0,0,0,.1); outline: none; background: #a2cf70 radial-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)); box-shadow: inset rgba(255,255,255,.6) 0 .3em .3em, inset rgba(0,0,0,.2) 0 -.1em .3em, rgb(128,161,103) 0 7px 1px, rgba(0,0,0,.2) 0 .5em 5px; transition: background .2s ease-in-out; } a.button:hover { background-color: hsl(88, 70%, 75%); } a.button:active { top: .2em; color: rgba(254,255,255,.9); text-shadow: rgba(0,0,0,.2) 0 1px 2px; box-shadow: inset rgba(255,255,255,.6) 0 .3em .3em, inset rgba(0,0,0,.2) 0 -.1em .3em, rgba(0,0,0,.4) 0 .1em 1px, rgba(0,0,0,.3) 0 .2em 6px; } a.button:after { content: ""; position: absolute; width: 90%; height: 60%; top: 0; left: 5%; border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em; background-image: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.3)); } .button:active:after { opacity: .6; }</style>
Результат:	демо

Анимированная кнопка: "свечение текста"
HTML:	<input type="button" class="button4" value="Купить">
CSS:	<style>input.button4 { position: relative; display: inline-block; font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif; font-size: 1.5em; font-weight: 700; color: rgb(245,245,245); text-shadow: 0 -1px rgba(0,0,0,.1); text-decoration: none; user-select: none; padding: .3em 1em; outline: none; border: none; border-radius: 3px; background: #0c9c0d linear-gradient(#82d18d, #0c9c0d); box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } input.button4:hover { -webkit-animation-play-state: paused; animation-play-state: paused; cursor: pointer; } input.button4:active { top: 1px; color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); } @-webkit-keyframes pulsate { 50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;} } @keyframes pulsate { 50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;} }</style>
Результат: