Анимированные CSS3 кнопки

Опубликовал 22.10.2010 в рубрике css | 5 комментария(ев)

Анимированные CSS3 кнопки

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

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

Наши кнопки имеют три размера, которые можно выбрать путем применения классов:

HTML-код, отвечающий за размеры кнопок

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

Есть четыре доступных класса цвета – синий, зеленый, оранжевый и серый. Так же вы можете выбрать размер от малых, средних и до больших, и еще один класс – округлые, что создает более округлые версии кнопок. Имена классов легко запомнить, но это повышает возможность перекрытия с некоторыми из других классов на вашей уже существующей странице.

Очень важно понимать, что при помощи файла buttons.css можно легко менять параметры кнопок. При должном умении можно легко создать свои уникальные стили и использовать их в дальнейшем на ваших страницах.

Весь CSS код находится в buttons.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;

    /* 1px внутри кнопки */

    -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;
}

Анимация фона

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

Стиль кнопки

/* Синяя кнопка */

.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 кнопки (198.1 KB, 37 скачиваний)
Файл залит 22.10.2010 в 23:54

Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!

Добро пожаловать на ruVisio

Если вы еще не зарегистрированы, то желательно сделать это побыстрее :)

Авторизация

Забыли пароль?

Регистрация