Сегодня постараемся расширить круг стандартных стилей кнопок CSS с новыми примерами и разнообразным оформлением. Кнопки — это важный элемент любого веб-дизайна, который привлекает внимание пользователей и помогает создать понятный пользовательский интерфейс.
Стили CSS кнопок, представленные в этой статье, отображаются корректно во всех популярных браузерах. Разве что в IE ниже 10-й версии могут возникнуть несоответствия. Но процент пользователей IE 9-й версии или ниже, совсем незначителен. Так что можно пренебречь.
Стили кнопок CSS созданы с помощью каскадной таблицы, без каких-либо библиотек и скриптов. Подобные эффекты доступны благодаря новой версии CSS 3, которая расширила возможности веб-оформления. Подборка кнопок состоит из 14-ти примеров. Думаю, что-то интересное из них можно выбрать.
Вопросы!
Ответы на вопросы!
Ответы на вопросы!
HTML
<div class="knopka"> Вопросы! <span class="leftk">Ответы на вопросы!<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;
}
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);}
}
HTML
<a href="javascript: void 0;" class="knopka3">Посмотреть Demo</a>
CSS
.knopka3 {
background: none repeat scroll 0 0 #ff3737;
color: #fff;
display: table;
margin: 10px auto;
padding: 17px 30px 15px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.knopka3:after {
background: none repeat scroll 0 0 #fff;
bottom: 10px;
content: "";
display: block;
height: 1px;
position: absolute;
transition: all 0.3s ease-out 0s;
width: 0px;
}
.knopka3:hover {
color: #fff;
}
.knopka3:hover:after {
transition: all 0.3s ease-out 0s;
width: 72%;
}
HTML
<div class="knopka4"> <a href="javascript: void 0;">Скачать</a> <div> <ul> <li><a href="#">Яндекс. Диск</a></li> <li><a href="#">Dropbox</a></li> <li><a href="#">Торрент</a></li> </ul> </div> </div>
CSS
.knopka4 {
display: table;
position: relative;
margin: 10px auto;
}
.knopka4 a {
font: 400 13px verdana;
text-decoration: none;
text-align: center;
padding: 5px 0;
}
.knopka4 > a {
display: inline-block;
width: 100px;
z-index: 1;
font-weight: bold;
color: #616267;
border: 1px solid #8F8F8F;
border-radius: 3px;
background: #fff;
background-image: -webkit-linear-gradient(top, #FAFBFD, #F6F7FC);
background-image: -moz-linear-gradient(top, #FAFBFD, #F6F7FC);
}
.knopka4 > a:hover {
background: #eee;
background-image: -webkit-linear-gradient(top, #F4F7FC, #FAFBFF);
background-image: -moz-linear-gradient(top, #F4F7FC, #FAFBFF);
}
.knopka4 div {
position: absolute;
width: 100px;
height: 8px;
overflow: hidden;
left: 2px;
top: 28px;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
}
.knopka4:hover div {
height: 94px;
}
.knopka4 ul {
position: absolute;
bottom: 5px;
left: 0;
width: 96px;
background: #56A0F9;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.15), transparent);
margin: 0;
padding: 2px 0 9px;
border-radius: 0 0 3px 3px;
border: 1px solid rgba(0,0,0,0.25);
border-width: 0 1px 1px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset;
z-index: 9999;
}
.knopka4 ul::before {
content: '.';
text-indent: -9999px;
display: block;
background: #56A0F9;
width: 15px;
height: 15px;
position: absolute;
bottom: -4px;
left: 38px;
border-radius: 15px;
box-shadow:
0 -1px 0 rgba(255,255,255,0.5) inset,
0 1px 0 #666;
z-index: 0;
}
.knopka4 ul::after {
content: '.';
text-indent: -9999px;
display: block;
background: #fff;
width: 5px;
height: 5px;
position: absolute;
bottom: -2px;
left: 42px;
border-radius: 15px;
border: 1px solid #666;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5);
z-index: 0;
}
.knopka4 ul {
background: #2C2D32;
}
.knopka4 ul::before {
background: #2C2D32;
}
.knopka4:hover ul {
bottom: none;
}
.knopka4 ul li {
list-style: none;
margin: 0;
padding: 0;
}
.knopka4 ul li a {
display: block;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.knopka4 ul li a:hover {
text-decoration: underline;
}
HTML
<div class="wrkno5"> <a href="javascript: void 0;" class="knopka5">Посмотреть Demo</a> </div>
CSS
.wrkno5 {
background: none repeat scroll 0 0 #28261f;
margin: 10px auto;
width: 400px;
height: 100px;
display: table;
}
a.knopka5 {
background: -moz-linear-gradient(center top , #38362e, #2e2d26) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
box-shadow: 0 1px 0 0 #605e59 inset, 0 1px 6px #13120f;
color: #fff;
cursor: pointer;
font:18px verdana;
margin: 18px auto 10px;
padding: 20px 30px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
text-transform: uppercase;
vertical-align: bottom;
z-index: 2;
display: table;
}
a.knopka5:active {
background: -moz-linear-gradient(center top , #1c1b17, #323028) repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 1px 4px 0 #000 inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 #4c4b44;
padding: 24px 35px 18px;
}
HTML
<a class="knopka7 effe1">Посмотреть Demo</a>
CSS
.knopka7{
background: #F89D52;
color: #fff;
cursor: pointer;
display: table;
font-size: 19px;
padding: 10px;
margin: 10px auto;
overflow: hidden;
text-align: center;
}
.effe1{
color:rgba(0,0,0, 0) !important;
transition: all .3s ease;
text-shadow:0 0 0 #fff, 0 45px 0 #000 ;
}
.effe1:hover{ text-shadow: 0 -45px 0 #fff, 0 0 0 #000 ; }
.knopka7.effe1:hover{
-webkit-animation: drop .6s 1 linear;
animation: drof .6s 1 linear;}
@keyframes drof {
0%{text-shadow:0 0 0 #fff, 0 -45px 0 #000 ;}
20% {text-shadow:0 0 0 #fff, 0 -15px 0 #000 ;}
30%{text-shadow:0 15px 0 #fff, 0 0px 0 #000 ;}
40%{text-shadow:0 45px 0 #fff, 0 0px 0 #000 ;}
41%{text-shadow:0 45px 0 #fff, 0 0px 0 #000 , 0 -45px 0 #fff ;}
70%{text-shadow:0 45px 0 #fff, 0 15px 0 #000 , 0 0px 0 #fff ;}
80%{text-shadow:0 45px 0 #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
100%{text-shadow:0 45px 0 #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
}
HTML
<a class="knopka8 effe2">Посмотреть Demo</a>
CSS
.knopka8{
background: #3cb464;
color: #fff;
cursor: pointer;
display: table;
font-size: 19px;
padding: 10px;
margin: 10px auto;
overflow: hidden;
text-align: center;
}
.effe2{
color:rgba(0,0,0, 0) !important;
transition: all .3s ease;
text-shadow:0 0 0 #fff, 0 -45px 0 #000 ;
}
@keyframes drop {
0%{text-shadow:0 0 0 #fff, 0 -45px 0 #000 ;}
20% {text-shadow:0 0 0 #fff, 0 -15px 0 #000 ;}
30%{text-shadow:0 15px 0 #fff, 0 0px 0 #000 ;}
40%{text-shadow:0 45px 0 #fff, 0 0px 0 #000 ;}
41%{text-shadow:0 45px 0 #fff, 0 0px 0 #000 , 0 -45px 0 #fff ;}
70%{text-shadow:0 45px 0 #fff, 0 15px 0 #000 , 0 0px 0 #fff ;}
80%{text-shadow:0 45px 0 #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
100%{text-shadow:0 45px 0 #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
}
.knopka8.effe2:hover{
-webkit-animation: drop .6s 1 linear;
animation: drop .6s 1 linear;}
HTML
<a href="javascript: void 0;" class="knopka10 eff10">Demo</a>
CSS
.knopka10 {
color: #333;
cursor: pointer;
display: block;
font:400 16px/43px verdana;
margin: 10px auto;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
text-align:center;
box-sizing: inherit;
transition-duration: 0.6s;
transition-property: all;
transition-timing-function: ease;
}
.knopka10:hover {
text-decoration: none;
}
.eff10 {
letter-spacing: 0;
}
.eff10:hover, .eff10:active {
letter-spacing: 5px;
}
.eff10:after, .eff10:before {
backface-visibility: hidden;
border: 1px solid rgba(255, 255, 255, 0);
bottom: 0;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out 0s;
width: 0;
}
.eff10:hover:after, .eff10:hover:before {
backface-visibility: hidden;
border-color: #333;
transition: width 350ms ease-in-out 0s;
width: 70%;
}
.eff10:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
HTML
<a href="javascript: void 0;" class="knopka11">Скачать</a>
CSS
.knopka11 {
display: table;
position: relative;
padding: 10px 25px;
background: #4CC713;
color: #fff;
font:13px verdana;
text-decoration: none;
text-align: center;
text-indent: 15px;
margin:10px auto;
transition:all 0.5s ease 0s;
}
.knopka11:hover {
background-color: #333;
color: white;
}
.knopka11:before, .knopka11:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.knopka11:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.knopka11:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.knopka11:hover:before {
border-color: #4CC713;
}
.knopka11:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
HTML
<a href="javascript: void 0;" class="knopka12">Посмотреть</a>
CSS
.knopka12 {
display: table;
padding: 4px 14px;
margin: 10px auto;
font-size: 14px;
line-height: 20px;
color: #f1f1f1;
text-align: center;
text-shadow: 0 1px 0px rgba(255, 255, 255, .125);
vertical-align: middle;
cursor: pointer;
background: #484850;
border: 1px solid #e7e7e7;
border-radius: 4px;
text-decoration: none;
}
.knopka12:not(:hover) {
transition: all 0.5s ease 0s;
}
.knopka12:hover {
color: #484850;
background: #e7e7e7;
text-shadow: 0 1px 0px rgba(255, 255, 255, .25);
border: 1px solid #484850;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
text-decoration:none;
}
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;
}
HTML
<a href="javascript: void 0;" class="knopka14">Дальше</a>
CSS
.knopka14 {
background: #fff;
border: 1px solid #4da8c7;
border-radius: 10px;
color: #4da8c7;
display: block;
letter-spacing: 3px;
margin: 10px auto;
padding: 15px 10px;
text-align: center;
width: 150px;
}
.knopka14:hover {
cursor: pointer;
}
.knopka14:after {
content: ">";
display: inline;
font-size: 18px;
margin-left: 0;
opacity: 0;
transition: all 0s ease 0s, all 0.2s ease 0s;
}
.knopka14:hover:after {
content: ">";
font-weight: bold;
margin-left: 20px;
opacity: 1;
transition: all 0s ease 0s, all 0.2s ease 0s;
}
HTML
<a class="knopka16" href="javascript: void 0;">Посмотреть</a>
CSS
.knopka16 {
background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
background-position: 0 0px, 100% 0px, 0 100%, 100% 100%;
background-repeat: no-repeat;
background-size: 2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 1.5rem, 5px 1.5rem, 5px 1.5rem, 5px 1.5rem;
box-shadow: 0 0 0 5px rgba(255, 99, 71, 0) inset;
color: #333;
margin: 10px auto;
display: table;
font: 500 20px verdana;
padding: 15px 25px;
position: relative;
text-decoration: none;
transform: translateZ(0px);
transition: background-size 1s ease 0.4s, box-shadow 0.4s ease 0s, color 0.4s ease 0s;
}
.knopka16:hover {
background-size: 52% 5px, 52% 5px, 52% 5px, 52% 5px, 5px 52%, 5px 52%, 5px 52%, 5px 52%;
box-shadow: 0 0 0 5px tomato inset;
color: tomato;
transition: background-size 1s ease 0s, box-shadow 0.4s ease 0.6s, color 0.4s ease 0.6s;
}
HTML
<a href="javascript: void 0;" class='knopka17 knopka17ef'>Скорей жмиии!!!</a>
CSS
.knopka17 {
animation-iteration-count: infinite;
border: 2px solid #232323;
border-radius: 0.4em;
color: #232323;
display: table;
font:500 16px verdana;
letter-spacing: 1px;
margin:10px auto;
padding:10px 18px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s linear 0s;
}
.knopka17:hover {
animation: 0s ease 0s normal none 1 running none;
background: none repeat scroll 0 0 #232323;
color: #ffffff;
}
.knopka17ef {
animation-duration: 0.75s;
animation-name: jump;
}
@keyframes jump {
0% {
transform: scale(1, 1) translate(0px, 0px);
}
30% {
transform: scale(1, 0.8) translate(0px, 10px);
}
75% {
transform: scale(1, 1.1) translate(0px, -25px);
}
100% {
transform: scale(1, 1) translate(0px, 0px);
}
}