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

Анимированные кнопки без скриптов

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

Как установить такие кнопки к себе на сайт и под силу ли это новичкам? Установку анимированных кнопок осилит любой начинающий вебмастер, так как в данном случае требуется минимум действий с вашей стороны: создать саму ссылку и подключить два файла css, с этим вы уж точно справитесь!

Данные кнопки доступны в четырех цветовых решениях и трех размерах, маленькие кнопки представлены в 2-х вариациях: с круглыми краями и слегка закругленными, выбирайте на свой вкус. Но ничего вам не мешает в процессе установки изменить цвет кнопок на любой другой, если они не вписываются в ваш дизайн, для этого внесите правки в файл button.css.

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

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

Итак, приступим... Сначала определитесь, кнопки какого размера и цвета будете использовать на своем сайте, после чего пропишите в html-коде страницы ссылки с присвоением нужного класса для выбранных кнопок.

Примеры html-кода ссылок:

<a href="#" class="button big blue">Надпись на кнопке</a> - для большой кнопки синего цвета;

<a href="#" class="button green medium">Надпись на кнопке</a> - для средней кнопки зеленого цвета;

<a href="#" class="button small orange">Надпись на кнопке</a> - для маленькой кнопки оранжевого цвета;

<a href="#" class="button small gray rounded">Надпись на кнопке</a> - для круглой кнопки серого цвета.

Думаю, здесь все понятно, вместо знака решетки прописываете страницу сайта, на которую ведет данная ссылка, цвет (blue, green, orange, gray) и размер (big, medium, small, small rounded) выбираете сами, вместо слов "надпись на кнопке" пишите свой текст. Когда все ссылки готовы, приступаем к реализации анимации.

Для этого подключаем стили (два файла из архива) между тегами <head> и </head>:

Я создала на сервере в корневой папке отдельную папку animbutton для анимированных кнопок, чтобы стили разных элементов на странице не наложились друг на друга, и переместила туда папку css из архива с файлами buttons.css и style.css. Можно не создавать отдельную папку для анимированных кнопок, а загрузить стили в общую папку css на сервере, но в этом случае проследите, чтобы там уже не было файла с таким же названием style.css.

Без создания отдельной папки код для подключения стилей будет таким:

Также в архиве есть папка images с двумя фоновыми изображениями для анимации, ее тоже нужно закинуть на сервер. В моем случае я ее переместила в папку animbutton, а если вы не создаете отдельную папку, то перемещаете эти два изображения в общую папку img на сервере.

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

Ниже можно посмотреть на результат, именно такие кнопки должны у вас получиться, проверьте эффект анимации, наведя курсор на любую кнопку.

← Коллекция кнопок для сайта №4 | Иконки для RSS →

Добро пожаловать в проект "Сайт с нуля" !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

Пошаговое руководство для новичков по созданию,

раскрутке и монетизации собственного сайта.

WebPageMaker, Wordpress, Joomla - инструкции для

новичков по установке CMS и шаблонов к ним.

Проект для новичков

Главная Скачать Уроки Новости Статьи Контакты Карта сайта

Хочешь быть на шаг впереди и первее

остальных получать новые материалы

сайта? Тогда не забудь оставить свои

координаты: имя и электронный адрес!

2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.

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

Размер кнопок прописан здесь, по умолчанию дается три размера 30px,18px и13px.

/* The three buttons sizes */

.button.big { font-size:30px;}

.button.medium { font-size:18px;}

.button.small { font-size:13px;}

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

/* A more rounded button */

.button.rounded{

-moz-border-radius:4em;

-webkit-border-radius:4em;

border-radius:4em;

}

Редактирование цвета производится в блоке с соответствующим названием цвета, для редактирования голубой кнопки идем в BlueButton, для зеленой - в GreenButton и т.д. Меняете код цвета на нужный вам, после чего не забывайте перезалить на сервер отредактированный файл buttons.css.

/* BlueButton */

.blue.button{

color:#0f4b6d !important;

border:1px solid #84acc3 !important;

/* A fallback background color */

background-color: #48b5f2;

/* Specifying a version with gradients according to */

background-image: url('../images/button_bg.png'), url('../images/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('../images/button_bg.png'), url('../images/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('../images/button_bg.png'), url('../images/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('../images/button_bg.png'), url('../images/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));

}

Данный код состоит из двух участков, в первом задается цвет кнопки в спокойном состоянии, а во втором - более светлый оттенок при наведении на кнопку (начинается со строки blue.button:hover). Цвет кнопок нужно менять и в коде, начинающемся с решетки (например, #0f4b6d) и в коде rgba (например, 89,208,244,1). Как узнать код нужного цвета, смотрим здесь.

На этом материал завершаю, если вы находите его полезным, то не стесняйтесь поделиться с друзьями.

До новых встреч! С ув. Светлана (SvetLana_TSV)