Бесплатные анимированные кнопки для сайта с использованием CSS3

Разместил , 19 Окт.2011 / Просмотров: 12 059 / Комментариев: 18

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

Напоминаю, что эти кнопки являются бесплатными, и вы сможете их бесплатно скачать. Поехали.

Анимированные  CSS3 кнопки для Вашего сайта

Пример ι Скачать исходники

HTML

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

<a href="#" class="button blue big">Скачать</a>
<a href="#" class="button blue medium">Отправить</a>
<a href="#" class="button small blue rounded">Отправить</a>

В наличии есть 4 цвета кнопок — это  синий, зеленый, оранжевый и серый. Все классы, которые были представлены выше не являются обязательными, всё зависит какую кнопку Вы захотите поставить. Например: если нужна большая и голубая кнопка, тогда к ссылке нужно присвоить класс button blue big.

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

Если данная кнопка будет выглядеть не правильно на Вашем сайте, попробуйте присвоить более уникальный класс, но в этом случае нужно будет отредактировать их и в CSS.

Ну а теперь давайте всё же посмотрим как эти кнопки делаются при помощи CSS.

CSS

Весь код кнопок находится в buttons.css. Вы с лёгкостью сможете его поместить в существующий сайт и использовать его, что существенно облегчает задачу.

Вот сам код:

.button{
    font:15px Calibri, Arial, sans-serif;

    /* Полупрозрачная тень текста */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Подчёркиваем ссылки */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    background-position:bottom left;
    background-image:url('button_bg.png');

    /* Цвет фонового изображения */

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Закругленные углы кнопок 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* Подсветка кнопки */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Анимация фонового изображения с CSS3 */
    /* В настоящее время работает только в Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    -o-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

Как вы видите, что каждая кнопка имеет 4 фоновых изображения, которые все одновременно применяются. Кажется тут всё пугающим, но не всё так сложно, только один файл используется с сервера — это фоновое изображение пузырей. И никакой нагрузки на сервер это не несёт.

Это фоновое изображение применяется для анимации в кнопках при наведении. Как вы заметили изображение не анимированное. Сама анимация делается только при помощи CSS3.

Теперь несколько слов о размере и скругленных углов кнопок:

/* Три размера кнопок */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* Скругленные углы кнопок */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}

В коде выше указаны три класса — это big, medium и small. Соответственно к каждому классу ставим разные значения в пикселях. Всё хорошо видно на коде выше.

А теперь самое интересная часть — это цвета. Тут, в принципе тоже ничего сложного нет.

/* Гоубая кнопка */

.blue.button{
    color:#0f4b6d !important;

    border:1px solid #84acc3 !important;

    /* Резервный цвет фона */
    background-color: #48b5f2;

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                           rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);

    background-image:    url('button_bg.png'), url('button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

Вот на этом пока что и всё. Хочу заранее предупредить, что в настоящее время, возможно кнопки не будут работать в некоторых браузерах, потому что, ещё пока, не все они поддерживают CSS3. Но мне кажется, что эта проблема скоро решится.

Пример ι Скачать исходники

До скорых встреч, друзья.

  • http://dastonaltis.ru Mike

    Александр, я правильно понял, что нужно создать файл с именем buttons.css и положить в него исходник, тогда все заработает?

  • http://dastonaltis.ru Mike

    Первый вопрос отпадает. Скачал исходники. Подскажите, как правильно разместить исходники на сайте под управлением Вордпресс?

  • http://beloweb.ru/ Александр

    Mike, в хидере прикрепите CSS кнопок, главное не забудьте поменять ссылки на картинки в CSS. Далее, просто в том месте где хотите чтобы отображалась кнопка вставьте ссылку с соответствующим классом, например, Скачать

  • http://dastonaltis.ru Mike

    Понял, попрубую разобраться, спасибо

  • http://beloweb.ru/ Александр

    Если что то ещё будет не понятно, спрашивайте :-)

  • BOLTACHEV

    Вобще не понял как установить, можно попонятней? Для начинающих

  • http://beloweb.ru/ Александр

    BOLTACHEV, для начала нужно скинуть картинки на хостинг. Потом нужно добавить стили CSS себе на сайт, затем в CSS заменить ссылки на них. Далее нужно в код ссылки добавить желаемый класс кнопки, например голубой большой button blue big

  • http://moymk.ru Татьяна

    Очень понравилось, но сделать так точно не смогу :( Александр, подскажите, если создать просто анимированную картинку подобную в фотошопе. Потом как анимацию вставить ее в текст, и потом в режиме HTML что-то дописать, чтобы она не всегда была анимированной а только при наведении на нее курсора. Так можно? :)

  • http://beloweb.ru/ Александр

    Здравствуйте, Татьяна, если речь идёт именно о этих кнопках, то тогда можно, только картинку нужно такого же размера сделать как и картинка с шариками.

  • http://moymk.ru Татьяна

    Нет. Немного не так. Вот смотрите. Я нарисую сама кнопку в фотошопе. Просто это будет не обычная картинка а анимация. Вот… Мммм, еще попробуй объясни, что именно мне надо….
    В общем меня интересует вопрос — можно ли сделать так чтобы картинка ( = скрытая ссылка) в тексте выглядела просто как картинка… :) не анимация… а когда курсор на нее (ссылку-картинку) наводишь, то она начинает вот так вот мигать. Так можно сделать?

  • http://beloweb.ru/ Александр

    Татьяна, возможно, попробуйте, подставить данный код к Вашей картинке и всё. :-)

  • Алла

    Так эта анимация работает не во всех браузерах?

  • http://beloweb.ru/ Александр

    Здравствуйте, Алла. Да, во всех современных браузерах эти кнопки будут работать.

  • Алла

    Почему-то в Опере не работает =(
    С чем это может быть связано?

  • Алла

    А всё спасибо, разобралась. Я просто ещё добавила код, чтобы текст ссылки переливался. И из-за этого в Опере не работала анимация. =) Спасибо

  • http://beloweb.ru/ Александр

    Алла, только что проверил у меня в опере всё работает. Это может быть связано с версией оперы, попробуйте обновиться на более новую версию.

  • http://beloweb.ru/ Александр

    На здоровье :)

  • http://italiaprod.com Роман Малышев

    Для Opera используйте вендорныйй префикс -o- для мозиллы -moz- для сафари и хрома -webkit- для эксплорера -ms-