Кнопки на чистом css
Кнопки с тенью и блеском на чистом css + кнопки в виде переключателя.
- №1| Просто красивые кнопки:
- смотреть кнопки с блеском
- кнопка с выездом
- смотреть переключатели
====== Пример Проосто красивой кнопки №1
<a class="knopnais" href="">Регистрация</a>
<style>
.knopnais {margin-right:25px; border-radius: 2px; font-size: 12px;
text-shadow: 0 -1px #6f6f6f; outline: 0; line-height: 1.5; padding: 7px 10px;box-shadow: inset 0 1px 2px #DB986B;
color: #fff; border: 1px solid #BF5E1E; background: #d26c22;
background-size: 100%
;background-image: linear-gradient(to bottom,#D98953,#d26c22);}
</style>margin-right:
<a href="#" class="knop-var1">Кнопка</a>
<a href="#" class="knop-var2">Кнопка 2</a>
<a href="#" class="knop-var3">3</a>
<style>
[class*='knop-'] {background: #5ca934;border-color: #478228 #478228 #3c6f22;background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f); font-size: 16px; color: white;text-align: center; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.5); border: 1px solid;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
[class*='knop-']::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none;
background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
[class*='knop-']:hover {text-shadow: 6px 6px 6px rgba(0,0,0,0.2), 0px -5px 12px rgba(255,255,255,0.3); color:#fff;}
.knop-var1 {display: inline-block; padding: 5px 20px; border-radius: 3px;}
.knop-var2 {display: inline-block;padding: 5px 20px; border-radius:13px;}
.knop-var3 {display: inline-block; width:35px;height:35px; padding:0; line-height:2; border-radius:50%;}
</style>-*-
Вариант 2
-*-
Вариант 3
-*-
====== Пример 2
<a href="#" class="a-btn-3">
<span class="a-btn-3-text">Название кнопки</span>
<span class="a-btn-3-slide-text">скрытый текст</span>
<span class="a-btn-3-icon-right"><i>▶</i></span>
</a>
<style>
/* #knopka s viezdom# */
.a-btn-3{background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);background-image:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );padding-left:20px;padding-right:80px;height:38px;display:inline-block;position:relative;border:1px solid #5d81ab;box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); border-radius:20px;float:left;clear:both;margin:10px 0px;overflow:hidden;transition:all 0.3s linear;}
.a-btn-3-text{padding-top:9px;display:block;font-size:18px;white-space:nowrap;text-shadow:0px 1px 1px rgba(255,255,255,0.3);color:#446388;transition:all 0.2s linear;}
.a-btn-3-slide-text{position:absolute;height:100%;top:0px;right:52px;width:0px;background:#63707e;text-shadow:0px -1px 1px #363f49;color:#fff;font-size:18px;white-space:nowrap;text-transform:uppercase;text-align:left;text-indent:10px;overflow:hidden;line-height:38px;box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;transition:width 0.3s linear;}
.a-btn-3-icon-right{position:absolute;right:0px;top:0px;height:100%;width:52px;border-left:1px solid #5d81ab;box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;}
.a-btn-3-icon-right i {opacity:0.7;position:absolute;left:35%;top:9px;transition:all 0.3s linear;}
.a-btn-3:hover{padding-right:170px;box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);}
.a-btn-3:hover .a-btn-3-text{text-shadow:0px 1px 1px #5d81ab;color:#fff;}
.a-btn-3:hover .a-btn-3-slide-text{width:74%;}
.a-btn-3:hover .a-btn-3-icon-right span{opacity:1;}
.a-btn-3:active{position:relative;top:1px;background:#5d81ab;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;border-color:#80a9da;}
</style>Кнопка с выездом дополнительной информации:
====== Пример 3
<span class="toggle">
<input type="checkbox">
<label data-off="✖" data-on="✔"></label>
</span>
<span class="toggle">
<input type="checkbox">
<label data-off="◼" data-on="▶"></label>
</span>
<span class="toggle">
<input type="checkbox">
<label data-off="Stop" data-on="Play"></label>
</span>
<style>
/* Кнопки переключатели */
.toggle {position:relative;display:inline-block;width:40px;height:60px;background-color:#bbb; border-radius:4px;text-align:center;}
.toggle input {width:100%;height:100%;margin:0 0;padding:0 0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;cursor:pointer;opacity:0;filter:alpha(opacity=0);}
.toggle label {display:block;position:absolute;top:1px;right:1px;bottom:1px;left:1px;background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
box-shadow:0 2px 3px rgba(0,0,0,0.4),inset 0 -1px 1px #888,inset 0 -5px 1px #bbb,inset 0 -6px 0 white;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:normal 11px Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 white;cursor:text;}
.toggle label:before {content:attr(data-off);position:absolute;top:6px;right:0;left:0;z-index:4;}
.toggle label:after {content:attr(data-on);position:absolute;right:0;bottom:11px;left:0;color:#666;text-shadow:0 -1px 0 #eee;}
.toggle input:checked + label {background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
box-shadow:0 0 1px rgba(0,0,0,0.4),inset 0 1px 7px -1px #ccc,inset 0 5px 1px #fafafa,inset 0 6px 0 white;}
.toggle input:checked:hover + label {box-shadow:0 1px 3px rgba(0,0,0,0.4),inset 0 1px 7px -1px #ccc,inset 0 5px 1px #fafafa,inset 0 6px 0 white;}
.toggle input:checked + label:before {z-index:1;top:11px;}
.toggle input:checked + label:after {bottom:9px;color:#aaa;text-shadow:none;z-index:4;}
</style>