Цветные CSS-кнопки ссылки

Пример реализации простых кнопок ссылок с градиентной заливкой зеленым, красным и синим цветами, а также закругленными краями. Проработаны стили «баттонов» при наведении курсора.

CSS кнопки-ссылки

Все комментарии в CSS разделены на следующие три части:

  • Default style — стиль кнопки по умолчанию.
  • Buttons — простые HTML кнопки-ссылки.
  • Buttons with a gradient — кнопки с градиентом.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Цветные кнопки-ссылки на HTML</title>
  <link rel="stylesheet" type="text/css" href="knopki.css" media="screen" />
</head>
<body>
  <p><a class="site-button green cssgradients" href="#">Зеленая кнопка</a></p>
  <p><a class="site-button red cssgradients" href="#">Красная кнопка</a></p>
  <p><a class="site-button blue cssgradients" href="#">Голубая кнопка</a></p>
</body>
</html>

Цветовое оформление, стили:

  • Green — зеленый.
  • Red — красный.
  • Blue — голубой / синий.

Собственно сами исходники стилевой разметки представлены чуть далее. А вот скачать готовый пример можно вот здесь:

Скачать

P.S. Работает только в Mozilla Firefox и Google Chrome.

CSS:

/* Default style:*/
.site-button {
 border-radius:4px;
 color:#FFF !important;
 display:inline-block;
 font-size:16px;
 font-weight:bold;
 line-height:16px;
 margin:0;
 padding:6px 10px;
 vertical-align:middle;
 white-space:nowrap;
 text-decoration:none;
}

/* Buttons:*/
.blue {
 background-color:#1FBBE7;
 border:1px solid #14A3DF;
}
.green {
 background-color:#7DD060;
 border:1px solid #399A2C;
}
.red {
 background-color:#E62525;
 border:1px solid #9C1818;
}
.blue:hover {
 background-color:#0098D2;
 text-decoration:none;
}
.green:hover {
 background-color:#277D12;
 text-decoration:none;
}
.red:hover {
 background-color:#C42020;
 text-decoration:none;
}

/* Buttons with a gradient:*/
.blue.cssgradients {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #14a4df), color-stop(0.77, #2bd4f0) );
 background:-moz-linear-gradient( center bottom, #14a4df 6%, #2bd4f0 77% );
}
.blue.cssgradients {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, rgb(178,226,249)), color-stop(0.77, rgb(221,242,253)) );
 background:-moz-linear-gradient( center bottom, rgb(178,226,249) 6%, rgb(221,242,253) 77% );
}
.blue.cssgradients:hover {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #0070c1), color-stop(0.77, #00bce2) );
 background:-moz-linear-gradient( center bottom, #0070c1 6%, #00bce2 77% );
}
.green.cssgradients {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #399a2c), color-stop(0.77, #7dd060) );
 background:-moz-linear-gradient( center bottom, #399a2c 6%, #7dd060 77% );
}
.green.cssgradients:hover {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #194f0b), color-stop(0.77, #35ab19) );
 background:-moz-linear-gradient( center bottom, #194f0b 6%, #35ab19 77% );
}
.red.cssgradients {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #9c1818), color-stop(0.77, #e62525) );
 background:-moz-linear-gradient( center bottom, #9c1818 6%, #e62525 77% );
}
.red.cssgradients:hover {
 background:-webkit-gradient( linear, left bottom, left top, color-stop(0.06, #780d0d), color-stop(0.77, #cf1717) );
 background:-moz-linear-gradient( center bottom, #780d0d 6%, #cf1717 77% );
}
Опубликовано 13-03-2013 в 15:13


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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты