Страницы Интернета

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

Не будем и мы воронами-блондинками и попытаемся воспроизвести что-нибудь подобное и прекрасное в наших блогах.

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

Установка стильных кнопок на CSS в блог.

Пропишем стили CSS для кнопок.

Проследуйте Шаблон > Изменить HTML.
Все стили следует вносить перед отрезком ]]></b:skin>.

Для начала создадим визуальную основу нашей кнопки:

.button{
        position: relative;
        margin: 0 .5em .5em . 0 .5em;
        padding: 0.5em 1em;
        font-size: 14px;
        font-weight: bold;
        font-family: Georgia, Arial, Helvetica, sans-serif;
        text-shadow: 0 1px 1px #fcdf88;
        border: 1px solid #c17931;
        border-top-color: #bdbdbd;
        letter-spacing:-1px;
        border-radius: .214em;
        -webkit-border-radius: .214em;
        -moz-border-radius: .214em;
        transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        color: #000000;
        background: #c17931;
        background: -webkit-gradient(linear, left top, left bottom, from(#c17931), to(#934805));
        background: -moz-linear-gradient(top, #c17931, #934805);
        border: 1px solid #68211d;
        border-top-color: #68211d;
        border-bottom-color: #68211d;
        box-shadow: inset 0 1px 0 #fff;
        -webkit-box-shadow: inset 0 1px 0 #fff;
        -moz-box-shadow: inset 0 1px 0 #fff;
        -o-box-shadow: inset 0 1px 0 #fff;
 }

Здесь мы задали тень надписи, скругление углов, цветовой градиент и плавное изменение соответствующих эффектов при наведении. Все это, однако, не поддерживается чудесным браузером Internet Explorer, и в нем кнопка будет выглядеть так:


Следующим действием добавим эффекты при наведении курсора мыши на кнопку:

.button:hover {
     box-shadow: 0 0 10px #68211d;
     box-shadow: 0 0 10px #68211d, inset 0 1px 0 #fff;
     -webkit-box-shadow: 0 0 10px #68211d, inset 0 1px 0 #fff;
     -moz-box-shadow: 0 0 10px #68211d, inset 0 1px 0 #fff;
     -o-box-shadow: 0 0 10px #68211d, inset 0 1px 0 #fff;
     cursor:pointer;
 }

Наконец, украсим кнопку, выделив ее при нажатии:

.button:active {
     background: #8abcd7;
     background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
     background: -moz-linear-gradient(top, #81afc8, #b7def4);
     border-color: #6e94a9;
     border-top-color: #567c91;
     border-bottom-color: #88aec4;
     box-shadow: inset 0 -1px 1px #fff;
     -webkit-box-shadow: inset 0 -1px 1px #fff;
     -moz-box-shadow: inset 0 -1px 1px #fff;
     -o-box-shadow: inset 0 -1px 1px #fff;  
 }

При желании можете изменить градиент фона кнопки в соответствии с дизайном вашего блога, используя онлайн-генератор web-цветов.

HTML-конструкция кнопки.

Теперь для того, чтобы воссоздать кнопку в нужном месте блога, достаточно задать требуемой ссылке либо обычному тексту класс button. Общая конструкция с ссылкой:

<a href="ссылка" class="button">Текст кнопки</a>

Действующие примеры стильных кнопок на CSS.

Демо кнопки 1


Демо кнопки 2


Демо кнопки 3