CSS кнопки: генератор

Сколько времени вы тратите на ручное создание кнопок на HTML? Веб-сервис http://www.cssbuttongenerator.com/ поможет вам сэкономить ресурсы. Он представляет из себя бесплатный инструмент для генерации кроссбраузерных CSS кнопок.

HTML кнопки на CSS - генератор

Генератор обладает следующими возможностями, т.е. вы можете:

  • задать уровень закругленности углов элемента:
  • задать цветовое оформление кнопки, как из готовых цветовых схем, так и с ручным подбором градиента, цвета обводки…
  • можно прописать произвольное название класса CSS для кнопки;
  • можно указать тень и атрибуты шрифта, стиль надписи сменить.

Чтобы получить исходный код стилей единожды кликните по получившейся кнопке и скопируйте в буфер обмена текст из многострочного поля ввода. Если вы понимаете английский язык, то нетрудно об этом догадаться — «click on the generated button to get your css style code.».

Кнопка отрисовывается в двух состояниях — обычном и при наведении. Вот пример готового кода, полученного с помощью данного веб-сервиса:

.example {
    -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    box-shadow:inset 0px 1px 0px 0px #f29c93;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
    background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
    background-color:#fe1a00;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #d83526;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #b23e35;
}.example:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
    background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
    background-color:#ce0100;
}.example:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
Опубликовано 14-06-2013 в 12:59


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

Ваш 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 »

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