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

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

ОБСУЖДЕНИЕ

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

Красивые кнопки для сайта на css
Просмотров: 2249  Скачан: 204 раз  Комментариев в теме: 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Кнопка с анимацией на css3

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

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

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

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

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

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

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

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

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

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

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

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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