Стили кнопок CSS созданы с помощью только CSS и HTML разметки. Подобные эффекты доступны благодаря новой версии CSS 3, которая расширила возможности веб-оформления. Самые различные виды дизайна и оформления понравятся многим. Подборку можно расценивать как для вдохновения, так и использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний.
N. 1
Кнопка N.1
HTML
<a class="bot1" href="#">Посмотреть Demo</a>
CSS
a.bot1{
background:linear-gradient(to bottom, #FFFFFF, #E6E6E6) #F5F5F5 repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3;
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #333333;
text-decoration:none;
display:block;
font-size: 14px;
width:120px;
line-height: 20px;
margin: 20px auto;
padding: 4px 12px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
a.bot1:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
a.bot1:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
a.bot1:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
N. 2
Кнопка N.2
HTML
<a class="bot8" href="#">Посмотреть Demo</a>
CSS
a.bot8 {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
border-radius: 4px;
color: #555555;
display:block;
width:120px;
margin: 20px auto;
font-size: 14px;
text-align:center;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
text-decoration:none;
}
a.bot8:hover, a.bot8:focus {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0 none;
}
N. 3
Кнопка N.3
HTML
<a href="" class="fciA navItem"><span class="fciSpan">Demo</span></a>
CSS
a.fciA {
margin: 40px auto;
font-family:arial;
font-size: 40px;
line-height: 40px;
letter-spacing: -1px;
text-decoration: none;
text-align:center;
display:block;
width:150px;
color: #888888;
position: relative;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
transition: color 0.2s;
}
a.fciA:hover {
color: #444444;
background:rgba(0,0,0,0.1);
}
a.fciA:after {
left: -20px;
-webkit-transition-property: left, opacity, top;
-moz-transition-property: left, opacity, top;
-o-transition-property: left, opacity, top;
transition-property: left, opacity, top;
-webkit-transition-duration: .2s, .2s, .2s;
-moz-transition-duration: .2s, .2s, .2s;
-o-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
content: "";
width: 12px;
height: 12px;
background: transparent;
position: absolute;
border-left: 5px solid #444444;
border-top: 5px solid #444444;
top: -22px;
opacity: 0;
}
a.fciA:hover:after {
left: -10px;
top: -12px;
opacity: 1;
}
a.fciA:before {
right: -20px;
-webkit-transition-property: right, opacity, top;
-moz-transition-property: right, opacity, top;
-o-transition-property: right, opacity, top;
transition-property: right, opacity, top;
-webkit-transition-duration: .2s, .2s, .2s;
-moz-transition-duration: .2s, .2s, .2s;
-o-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
content: "";
width: 12px;
height: 12px;
background: transparent;
position: absolute;
border-right: 5px solid #444444;
border-top: 5px solid #444444;
top: -22px;
opacity: 0;
}
a.fciA:hover:before {
right: -10px;
top: -12px;
opacity: 1;
}
.fciSpan:after {
left: -20px;
-webkit-transition-property: left, opacity, bottom;
-moz-transition-property: left, opacity, bottom;
-o-transition-property: left, opacity, bottom;
transition-property: left, opacity, bottom;
-webkit-transition-duration: .2s, .2s, .2s;
-moz-transition-duration: .2s, .2s, .2s;
-o-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
content: "";
width: 12px;
height: 12px;
background: transparent;
position: absolute;
border-left: 5px solid #444444;
border-bottom: 5px solid #444444;
bottom: -24px;
opacity: 0;
}
.fciSpan:hover:after {
left: -10px;
bottom: -14px;
opacity: 1;
}
.fciSpan:before {
right: -20px;
-webkit-transition-property: right, opacity, bottom;
-moz-transition-property: right, opacity, bottom;
-o-transition-property: right, opacity, bottom;
transition-property: right, opacity, bottom;
-webkit-transition-duration: .2s, .2s, .2s;
-moz-transition-duration: .2s, .2s, .2s;
-o-transition-duration: .2s, .2s, .2s;
transition-duration: .2s, .2s, .2s;
content: "";
width: 12px;
height: 12px;
background: transparent;
position: absolute;
border-right: 5px solid #444444;
border-bottom: 5px solid #444444;
bottom: -24px;
opacity: 0;
}
.fciSpan:hover:before {
right: -10px;
bottom: -14px;
opacity: 1;
}
N. 4
Кнопка N.4
HTML
<a href="#" class="glo">Кнопка N.4</a>
CSS
a.glo{
color:#00c6ff;
padding: 10px 20px;
width:100px;
text-decoration:none;
text-align:center;
margin:20px auto;
display: block;
background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .25s ease-in;
font: 400 18px tahoma;
border: 1px solid #00C6FF;
}
a.glo:hover {
background-position: 0 0;
color:#fff;
}
N. 5
Кнопка N.5
Vavik96.com
Vavik96.com
HTML
<a class="bot1" href="#">Кнопка N.1</a>
<div class="knopka">
Кнопка N.5
<span class="leftk">Vavik96.com<span class="nub"></span>
</span>
</div>
CSS
.knopka {
background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.5);
color: #666;
cursor: pointer;
display: table;
font: 500 17px verdana;
margin: 10px auto;
padding: 10px 10px;
position: relative;
text-decoration: none;
text-align:center;
transition: all 0.4s ease-in 0s;
z-index: 1;
}
.knopka:hover, .knopka:active {
color: #222;
}
.knopka span {
box-sizing: border-box;
opacity: 0;
padding: 10px;
position: absolute;
transition: all 0.4s ease-in 0.2s;
width: 180px;
z-index: 1;
}
.knopka span .nub {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
border-color: transparent;
border-radius: 0;
border-style: solid;
box-sizing: border-box;
display: block;
height: 10px;
left: 42%;
padding: 5px;
position: absolute;
transform: rotate(45deg);
transition: all 0.4s ease-in 0.2s;
width: 10px;
z-index: 0;
}
.knopka span.leftk {
left: 4px;
top: 0;
}
.knopka span.leftk .nub {
left: 172px;
top: 20px;
}
.knopka:hover span {
background: none repeat scroll 0 0 #cadee8;
color: #444;
font-size: 16px;
height: auto;
opacity: 100;
transition: all 0.4s ease-in 0.2s;
}
.knopka:hover span .nub {
transition: all 0.4s ease-in 0.2s;
}
.knopka:hover span.leftk {
left: -193px;
}
N. 6
Кнопка N.6
HTML
<a class="knopka2" href="javascript: void 0;">Купить</a>
CSS
.knopka2 {
border: 3px solid #46DC64;
color: #46DC64;
display: block;
font: 500 26px/61px arial;
height: 64px;
margin: 0 auto;
overflow: hidden;
text-align: center;
text-decoration: none;
width: 160px;
animation: credits 1s infinite;
-webkit-animation: credits 1s infinite;
animation-name: credits;
-webkit-animation-name: credits;
transition: all 0.3s linear 0s;
}
.knopka2:hover {
border: 3px solid #FF3737;
color: #FF3737;
animation: 0s ease 0s normal none 1 running none;
}
@keyframes credits {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
@-webkit-keyframes credits {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-10px);}
60% {-webkit-transform: translateY(-5px);}
}
N. 7
Посмотреть
HTML
<a class="knopka13">Посмотреть</a>
CSS
.knopka13 {
margin:10px auto;
border: 2px solid #333;
color: #333;
cursor: pointer;
display: block;
font-weight: bold;
font: 16px/45px verdana;
line-height: 3em;
overflow: hidden;
padding: 5px 10px;
position: relative;
width: 150px;
text-align: center;
transition: color 250ms ease 0s;
}
.knopka13:after {
border: 0 solid #333;
border-radius: 50%;
bottom: -999px;
content: "";
height: 0;
left: -999px;
margin: auto;
position: absolute;
right: -999px;
top: -999px;
transition: border 250ms ease 0s;
width: 0;
z-index: -1;
}
.knopka13:hover {
color: #fff;
}
.knopka13:hover:after {
border-width: 200px;
transition: border 500ms ease 0s;
}
N. 8
HTML
<input class="button4" value="Купить" type="button">
CSS
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;}
}
N. 9
HTML
<a href="#on" class="button1">Глянцевая кнопка</a>
CSS
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;
}
N. 10
HTML
<a href="#" class="button19">кнопка</a>
CSS
a.button19 {
position: relative;
display: inline-block;
color: #777674;
font-weight: bold;
text-decoration: none;
text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
user-select: none;
padding: 1em 2em;
outline: none;
border-radius: 3px / 100%;
background-image:
linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
background-repeat: no-repeat;
background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button19:hover {
transition: .5s linear;
background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button19:active {
top: 1px;
}