Стили кнопок CSS. Новая подборка

Обновлено: Андрей HTML и CSS

Сегодня постараемся расширить круг стандартных стилей кнопок 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);}
}


Посмотреть Demo

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;
}

Посмотреть Demo

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;
}


Посмотреть Demo

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 ;}
}


Посмотреть Demo

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;}


Demo

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);
}
}
Читайте также:
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *