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

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

ОБСУЖДЕНИЕ

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

Кнопка Download на css3
Просмотров: 2464  Скачан: 234 раз  Комментариев в теме: 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

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

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

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....
Интересные публикации:

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

EbuyEbuy

Ebuy - это шаблон интернет магазина, который полюбился многим за свою простоту в использовании и надёжность....

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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