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

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

ОБСУЖДЕНИЕ

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

Кнопка Download на css3
Просмотров: 1791  Скачан: 203 раз  Комментариев в теме: 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 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

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

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

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

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Облако теговОблако тегов на css

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

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

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

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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