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