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

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

ОБСУЖДЕНИЕ

Красивая кнопка на css3

Кнопка Download на css3
Просмотров: 2173  Скачан: 223 раз  Комментариев в теме: 0

Красивая кнопка Download на css3 для вашего сайта, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст, довольно удобно!

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

 

HTML

<div class="cont">
    <div class="dropbutton">
        <div class="blue">
        <img src="images/arrow.png" /></div>
        <div class="green"><a href="#">Download now!</a></div>
        <div class="dark"><img src="images/file.png" />Version 3.0 <br />
            <span>255 MB</span>
        </div>
    </div>
    <div class="dropbutton">
        <div class="black"><img src="images/arrow.png" /></div>
        <div class="orange"><a href="#">Download now!</a></div>
        <div class="light"><img src="images/box.png" />ZIP File <br />
            <span>25 KB</span>
        </div>
    </div>
    <div class="dropbutton">
        <div class="purple"><img src="images/arrow_black.png" /></div>
        <div class="yellow"><a href="#">Try it now!</a></div>
        <div class="dark"><img src="images/file_red.png" />FREE TRIAL <br />
            <span>30 days</span>
        </div>
    </div>
    <div class="dropbutton">
        <div class="grey"><img src="images/arrow.png" /></div>
        <div class="grey"><a href="#">Download now!</a></div>
        <div class="light"><img src="images/file_blue.png" />Updated!<br />
            <span>version 2.3.1</span>
        </div>
    </div>
    <div class="dropbutton">
        <div class="red"><img src="images/arrow_black.png" /></div>
        <div class="blue"><a href="#">Buy it now!</a></div>
        <div class="light"><img src="images/box.png" />Special Offer <br />
            <span>25,99$</span>
        </div>
    </div>
    <div class="dropbutton">
        <div class="blue"><img src="images/arrow_black.png" /></div>
        <div class="green"><a href="#">Download now!</a></div>
        <div class="dark"><img src="images/file.png" />Version 3.0 <br />
            <span>255 MB</span>
        </div>
    </div>
</div>

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

 

CSS

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

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

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

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....
Интересные публикации:

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

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

Горизонтальное мега меню на css3Горизонтальное мега меню на css3

Отличное горизонтальное меню с большое количество пунктов....

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

Галерея на jQueryГалерея на jQuery

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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