qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Радиоактивные кнопки с эффектом

Радиоактивные кнопки с эффектом
Просмотров: 1271  Скачан: 250 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<div class="wall-of-buttons">
    <a class="large green button">Форум</a>
    <a class="large blue button">Кнопка</a>
    <a class="large magenta button">jQuery</a>
    <a class="large green button">Форум</a>
    <a class="large red button">Контакты</a>
    <a class="large magenta button">jQuery</a>
    <a class="small orange button">CSS</a>
    <a class="small magenta button">jQuery</a>
    <a class="small green button">Форум</a>
    <a class="small orangellow button">JS</a>
    <a class="small blue button">Кнопка</a>
    <a class="small red button">Контакты</a>
    <a class="small blue button">Кнопка</a>
    <a class="large magenta button">jQuery</a>
    <a class="large orangellow button">CSS</a>
    <a class="large red button">Контакты</a>
    <a class="large orange button">CSS</a>
    <a class="large green button">Форум</a>
    <a class="large orangellow button">JS</a>
    <a class="large red button">Контакты</a>
    <a class="large blue button">Кнопка</a>
    <a class="large orangellow button">JS</a>
    <a class="large blue button">Кнопка</a>
    <a class="large red button">Контакты</a>
    <a class="large orange button">CSS</a>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
Материалы по теме:

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......
Интересные публикации:

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Круговой слайдерКруговой слайдер css3

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...
  • Текущий 1.67/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.7/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить