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

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

ОБСУЖДЕНИЕ

Кнопки для сайта на css

Красивые кнопки для сайта на css
Просмотров: 2328  Скачан: 208 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="container">
    <div class="topList clear">
        <a href="#" class="button grey">Download</a>
        <a href="#" class="button red">Download</a>
        <a href="#" class="button blue">Download</a>
        <a href="#" class="button green">Download</a>
        <a href="#" class="button black">Download</a>
        <a href="#" class="button yellow">Download</a>
        <a href="#" class="button purple">Download</a>
        <a href="#" class="button gblue">Download</a>
    </div>
    <div class="groupList clear">
        <a href="#" class="button grey left">Download</a>
        <a href="#" class="button grey right">Demo</a>
        <a href="#" class="button blue left">Downloads</a>
        <a href="#" class="button blue middle">Demo</a>
        <a href="#" class="button blue right">Information</a>
        <a href="#" class="button yellow left">Download</a>
        <a href="#" class="button yellow middle">Demo</a>
        <a href="#" class="button yellow middle">Wow another button</a>
        <a href="#" class="button yellow right">Information</a>
    </div>
    <div class="largeList clear">
        <a href="#" class="button yellow large">Download</a>
        <a href="#" class="button red large">Demo</a>
        <a href="#" class="button purple large">Wow another button</a>
        <a href="#" class="button gblue large left">Information</a>
        <a href="#" class="button gblue large middle">Information</a>
        <a href="#" class="button gblue large right">Information</a>
    </div>
</div>

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

 

CSS

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

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

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

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

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

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

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

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

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

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

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

Социальные иконки на css3Социальные иконки на css3

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

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

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

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

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

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

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

EbuyEbuy

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

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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