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

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