6 полезных CSS кнопок

кнопка нравится на CSSС помощью CSS мы полностью меняем представление о создании кнопок для сайтов и интернет проектов. Раньше нам приходилось использовать несколько изображений для создания кнопки, а теперь несколько строк кода. Далее в статье вы увидите рецепт для приготовления шести различных кнопок с использованием CSS. Код представленный в статье вы можете просто взять и вставить в свой проект. Учитывайте только то, что часть кнопок будут некорректно отображаться в IE, но это решаемо — достаточно прочесть статью об условных комментариях для Internet Explorer.

Посмотреть демо

Овальная кнопка с двумя строчками

кнопка на CSS

Иногда случается так, что кнопке не хватает одной строчки. Используйте эту кнопку, когда вам есть что сказать. Для стилизации используется градиент от #99CF00 до #6DB700 и простые манипуляции с CSS.

HTML

Sign Up Now Free!

30 day risk free trial.

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

Красная пилюля

кнопка на CSS

Простая, но привлекающая внимание красная кнопка с сильно закругленными краями. Так же используется градиент от #d46d45 до #b1432a и небольшие эффекты для нижней и верхней границ. Эффект при нажатии — простая инверсия.
HTML

Press Me!

 

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

Темные выдавленные буквы

кнопка на CSS

Здесь применяется эффект вдавленного текста. Все что нужно для достижения этого эффекта это сделать цвет текста темнее, чем фон и задать тень более яркую, чем фон. Эффект при наведении — более светлые цвета.
HTML

Inset Button

 

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

Черный глянец

кнопка на CSS

Это кнопка получилась самая стильная. Здесь используются три трюка. Во-первых, использованы stop colours в градиенте, чтобы придать глянцевый вид. Во-вторых, использована внутренняя тень для текста, которая обычно используется чтобы придать глубины и сияния тексту. И последнее, используется небольшое свечение с помощью text-shadow, которое уменьшается при наведении курсора мыши.
HTML

Shiny Gloss

 

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

Голубая кнопка с иконкой

кнопка на CSS

В этой кнопке используется глянцевость с предыдущего примера и форма из примера кнопки красной пилюли. Для интересности кнопки добавлена иконка карандаша. Самое приятное, что для создания кнопки не нужно использовать специальных шрифтов, а только чистый HTML. Эта кнопка именно то, что легко может оживить любую форму с контактами.
HTML

Write to Us ✎

 

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)

кнопка нравится на CSS

А сейчас создадим две круглых кнопки, с помощью которых можно приукрасить простую систему рейтинга. Зеленая кнопка используется для положительного голоса, а красная для отрицательного. Иконки здесь созданы с помощью простого 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, который мне всегда поднимает настроение. Достаточно взглянуть на смешное фото. Кстати, именно там я нашел карикатуру Хауса, которая долго пребывала моим аватаром ВКонтакте.



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

14 комментариев: 6 полезных CSS кнопок

  1. Уведомление: 6 полезных CSS кнопок | Grabr

  2. Елена говорит:

    Хорошие кнопочки,  воспользуюсь.

    • Гилязетдинов Руслан говорит:

      пользуйтесь на здоровье 😉

      • lika говорит:

         И с удовольствием, только вот как ссылки то прописать? Кнопки какой несут смысл?

        • Гилязетдинов Руслан говорит:

          ну сделайте вместо div’ов ссылки)

  3. Alishok2008 говорит:

    Отлично)))) мне очень понравились эти кнопки!!! Обязательно их использую…

    • Гилязетдинов Руслан говорит:

      поддержите ретвитом если не сложно)

  4. E-lovtzova2010 говорит:

    Действительно интересный вариант кнопок и я хочу себе такие например «Нравится, Не нравится», только немного не понятно куда код прописывать и можно ли на движке  wp?

    • Гилязетдинов Руслан говорит:

      здесь только внешнее оформление, а код обрабатывающий события обычно пишется на php или javascript

  5. Nichald говорит:

    Добрый день!Большое вам спасибо!много нового узнал на вашем сайте!но есть проблема с кнопками вот в редакторе она отображается как следует а в материале на странице только одна строчка и та не на мести(( может подскажете в чем проблема?

    • Гилязетдинов Руслан говорит:

      какая именно кнопка? какой браузер используете? скиньте ссылочку на сайт.

  6. Red Spirit говорит:

    Мне больше понравилась кнопка «Посмотреть демо», взял её css стиль себе, спасибо! 🙂

  7. Yavedro говорит:

    для параграфа (p) в div-е (.button) можно вписать margin:0px; а то не у всех используется reset css, иначе уедет.  Жаль что для Ie костыли нужны а так класс Спасибо.

  8. Avanesov Andrey говорит:

    Хороший урок. Если кому интересно, есть прикольные кнопки без изображений

Добавить комментарий

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