С помощью CSS мы полностью меняем представление о создании кнопок для сайтов и интернет проектов. Раньше нам приходилось использовать несколько изображений для создания кнопки, а теперь несколько строк кода. Далее в статье вы увидите рецепт для приготовления шести различных кнопок с использованием CSS. Код представленный в статье вы можете просто взять и вставить в свой проект. Учитывайте только то, что часть кнопок будут некорректно отображаться в IE, но это решаемо — достаточно прочесть статью об условных комментариях для Internet Explorer.
Посмотреть демо
Овальная кнопка с двумя строчками
Иногда случается так, что кнопке не хватает одной строчки. Используйте эту кнопку, когда вам есть что сказать. Для стилизации используется градиент от #99CF00
до #6DB700
и простые манипуляции с CSS.
HTML
CSS
.button {
/*обычные свойства*/
width: 250px; height: 50px; color: white; background-color: #99CF00;
text-align: center; font-size: 30px; line-height: 50px;
/*градиент*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700));
background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00);
/*границы*/
border-left: solid 1px #c3f83a;
border-top: solid 1px #c3f83a;
border-right: solid 1px #82a528;
border-bottom: solid 1px #58701b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700))
}
.button h3 {
font-size: 20px;
line-height: 35px;
font-family: helvetica, sans-serif;
}
.button p {
font-size: 12px;
line-height: 4px;
font-family: helvetica, sans-serif;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6DB700), to(#99CF00));
background: -moz-linear-gradient(19% 75% 90deg,#99CF00, #6DB700);
}
Красная пилюля
Простая, но привлекающая внимание красная кнопка с сильно закругленными краями. Так же используется градиент от #d46d45
до #b1432a
и небольшие эффекты для нижней и верхней границ. Эффект при нажатии — простая инверсия.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 50px; color: white; background-color: #d46d45;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d46d45), to(#b1432a));
background: -moz-linear-gradient(19% 75% 90deg,#b1432a, #d46d45);
/*border styles*/
border-top: solid 2px #e28d79;
border-bottom: solid 1px #51281f;
border-right: solid 1px #d46d45;
border-left: solid 1px #d46d45;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.button p {
font-size: 25px;
line-height: 50px;
font-family: 'Trebuchet MS', sans-serif;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1432a), to(#d46d45));
background: -moz-linear-gradient(19% 75% 90deg,#d46d45, #b1432a);
border-top: solid 2px #b1432a;
border-bottom: solid 1px #e28d79;
}
Темные выдавленные буквы
Здесь применяется эффект вдавленного текста. Все что нужно для достижения этого эффекта это сделать цвет текста темнее, чем фон и задать тень более яркую, чем фон. Эффект при наведении — более светлые цвета.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 70px; color: #171717; background-color: #4f4f4f;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4f4f4f), to(#1d1d1d));
background: -moz-linear-gradient(19% 75% 90deg,#1d1d1d, #4f4f4f);
/*border styles*/
border-top: solid 2px #8f8f8f;
border-bottom: solid 2px #1a1a1a;
border-left: solid 2px #4f4f4f;
border-right: solid 2px #4f4f4f;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.button p {
font-size: 30px;
line-height: 70px;
font-family: verdana, sans-serif;
font-weight: bold;
text-shadow: 0px 2px 3px #444;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#616161), to(#292929));
background: -moz-linear-gradient(19% 75% 90deg,#292929, #616161);
border-top: solid 2px #8f8f8f;
border-bottom: solid 2px #282828;
}
.button p:hover{
text-shadow: 0px 2px 3px #555;
}
Черный глянец
Это кнопка получилась самая стильная. Здесь используются три трюка. Во-первых, использованы stop colours
в градиенте, чтобы придать глянцевый вид. Во-вторых, использована внутренняя тень для текста, которая обычно используется чтобы придать глубины и сияния тексту. И последнее, используется небольшое свечение с помощью text-shadow
, которое уменьшается при наведении курсора мыши.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 70px; color: #fff; background-color: #000;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2f2f2f), color-stop(.5, #1e1f1f), color-stop(.51, #0c0c0c), to(#000));
background: -moz-linear-gradient(top, #2f2f2f, #1e1f1f 50%, #0c0c0c 51%, #000);
/*border styles*/
border-top: solid 2px #555;
border-bottom: solid 2px #111;
-moz-box-shadow:inset 0 0 15px #000000;
-webkit-box-shadow:inset 0 0 15px #000000;
box-shadow:inset 0 0 15px #000000;
}
.button p {
font-size: 30px;
line-height: 70px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #888;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 50px #000000;
-webkit-box-shadow:inset 0 0 50px #000000;
box-shadow:inset 0 0 50px #000000;
}
.button p:hover {
text-shadow: 0px 0px 3px #444;
}
Голубая кнопка с иконкой
В этой кнопке используется глянцевость с предыдущего примера и форма из примера кнопки красной пилюли. Для интересности кнопки добавлена иконка карандаша. Самое приятное, что для создания кнопки не нужно использовать специальных шрифтов, а только чистый HTML. Эта кнопка именно то, что легко может оживить любую форму с контактами.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 50px; color: #fff; background-color: #125182;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #125182), color-stop(.5, #1269ab), color-stop(.51, #004375), to(#00345b));
background: -moz-linear-gradient(top, #125182, #1269ab 50%, #004375 51%, #00345b);
/*border styles*/
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
.button p {
font-size: 30px;
line-height: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #555;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 50px #000000;
-webkit-box-shadow:inset 0 0 50px #000000;
box-shadow:inset 0 0 50px #000000;
}
.button p:hover {
text-shadow: 0px 0px 3px #888;
}
Кнопки нравиться/не нравится (like/dislike)
А сейчас создадим две круглых кнопки, с помощью которых можно приукрасить простую систему рейтинга. Зеленая кнопка используется для положительного голоса, а красная для отрицательного. Иконки здесь созданы с помощью простого HTML и не требуют использования @font-face
шрифтов.
HTML
CSS
.green {
background-color: #00ab26;
}
.red {
background-color: #d90004;
}
.button {
/*basic styles*/
width: 100px; height: 100px; color: #fff;
text-align: center; font-size: 30px; line-height: 50px; float: left; margin-right: 20px;
/*gradient styles*/
/*border styles*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*shadow styles*/
-moz-box-shadow: 2px 3px 5px #bfbfbf;
-webkit-box-shadow: 2px 3px 5px #bfbfbf;
box-shadow: 2px 3px 5px #bfbfbf;
}
.button p {
font-size: 50px;
line-height: 100px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #888;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 30px #444;
-webkit-box-shadow:inset 0 0 30px #444;
box-shadow:inset 0 0 30px #444;
}
.button p:hover {
text-shadow: 0px 0px 4px #fff;
}
Посмотреть демо
Хочу посоветовать вам очень позитивный сайт с огромным количеством смешного фото и видео http://pozitiv-news.ru, который мне всегда поднимает настроение. Достаточно взглянуть на смешное фото. Кстати, именно там я нашел карикатуру Хауса, которая долго пребывала моим аватаром ВКонтакте.
Хорошие кнопочки, воспользуюсь.
пользуйтесь на здоровье 😉
И с удовольствием, только вот как ссылки то прописать? Кнопки какой несут смысл?
ну сделайте вместо div’ов ссылки)
Отлично)))) мне очень понравились эти кнопки!!! Обязательно их использую…
поддержите ретвитом если не сложно)
Действительно интересный вариант кнопок и я хочу себе такие например «Нравится, Не нравится», только немного не понятно куда код прописывать и можно ли на движке wp?
здесь только внешнее оформление, а код обрабатывающий события обычно пишется на php или javascript
Добрый день!Большое вам спасибо!много нового узнал на вашем сайте!но есть проблема с кнопками вот в редакторе она отображается как следует а в материале на странице только одна строчка и та не на мести(( может подскажете в чем проблема?
какая именно кнопка? какой браузер используете? скиньте ссылочку на сайт.
Мне больше понравилась кнопка «Посмотреть демо», взял её css стиль себе, спасибо! 🙂
для параграфа (p) в div-е (.button) можно вписать margin:0px; а то не у всех используется reset css, иначе уедет. Жаль что для Ie костыли нужны а так класс Спасибо.
Хороший урок. Если кому интересно, есть прикольные кнопки без изображений