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

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

ОБСУЖДЕНИЕ

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

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

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

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

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

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

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

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

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

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....
  • Текущий 1.10/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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