Главная » DARYA DLE » Готовые дизайны » Кнопки на чистом css
457 0  

Кнопки на чистом css

Кнопки с тенью и блеском на чистом css + кнопки в виде переключателя.

====== Пример Проосто красивой кнопки №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>

Вариант 1

Кнопка

-*-

Вариант 2

Кнопка 2

-*-

Вариант 3

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="&#10006;" data-on="&#10004;"></label>
</span>

<span class="toggle">
    <input type="checkbox">
    <label data-off="&#9724;" data-on="&#9654;"></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>

Кнопки переключатели:


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021