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

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

ОБСУЖДЕНИЕ

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

Красивые кнопки для вашего сайта на css3
Просмотров: 1010  Скачан: 194 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="container">
    <div data-for="beveled">
        <p>
            <a href="#" class="button-bevel orange"> <span class="refresh"></span> Button </a>
            <a href="#" class="button-bevel orange"> <span class="shuffle"></span> Button </a>
            <a href="#" class="button-bevel orange"> <span class="preview"></span> Button </a> 
            <a href="#" class="button-bevel orange"> <span class="tea"></span> Button </a> 
            <a href="#" class="button-bevel orange"> <span class="wifi"></span> Button </a> 
            <a href="#" class="button-bevel orange"> <span class="locator"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button-bevel magenta"> <span class="rss"></span> Button </a> 
            <a href="#" class="button-bevel magenta"> <span class="cloud"></span> Button </a> 
            <a href="#" class="button-bevel magenta"> <span class="download"></span> Button </a> 
            <a href="#" class="button-bevel magenta"> <span class="trash"></span> Button </a> 
            <a href="#" class="button-bevel magenta"> <span class="rack"></span> Button </a> 
            <a href="#" class="button-bevel magenta"> <span class="map"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button-bevel cyan"> <span class="setting"></span> Button </a> 
            <a href="#" class="button-bevel cyan"> <span class="identity"></span> Button </a> 
            <a href="#" class="button-bevel cyan"> <span class="navigation"></span> Button </a> 
            <a href="#" class="button-bevel cyan"> <span class="gallery"></span> Button </a> 
            <a href="#" class="button-bevel cyan"> <span class="email"></span> Button </a> 
            <a href="#" class="button-bevel cyan"> <span class="users"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button-bevel red"> <span class="calendar"></span> Button </a> 
            <a href="#" class="button-bevel red"> <span class="link"></span> Button </a> 
            <a href="#" class="button-bevel red"> <span class="time"></span> Button </a> 
            <a href="#" class="button-bevel red"> <span class="folder"></span> Button </a> 
            <a href="#" class="button-bevel red"> <span class="tag"></span> Button </a> 
            <a href="#" class="button-bevel red"> <span class="share"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button-bevel black"> <span class="edit"></span> Button </a> 
            <a href="#" class="button-bevel black"> <span class="upload"></span> Button </a> 
            <a href="#" class="button-bevel black"> <span class="storage"></span> Button </a> 
            <a href="#" class="button-bevel black"> <span class="photo"></span> Button </a> 
            <a href="#" class="button-bevel black"> <span class="help"></span> Button </a>  
            <a href="#" class="button-bevel black"> <span class="comment"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button-bevel green"> <span class="like"></span> Button </a> 
            <a href="#" class="button-bevel green"> <span class="phone"></span> Button </a> 
            <a href="#" class="button-bevel green"> <span class="flag"></span> Button </a> 
            <a href="#" class="button-bevel green"> <span class="adduser"></span> Button </a> 
            <a href="#" class="button-bevel green"> <span class="attach"></span> Button </a> 
            <a href="#" class="button-bevel green"> <span class="glass"></span> Button </a> 
        </p>
    </div>
    <div data-for="rectangle">
        <p>
            <a href="#" class="button orange"> <span class="refresh"></span> Button </a>
            <a href="#" class="button orange"> <span class="shuffle"></span> Button </a>
            <a href="#" class="button orange"> <span class="preview"></span> Button </a> 
            <a href="#" class="button orange"> <span class="tea"></span> Button </a> 
            <a href="#" class="button orange"> <span class="wifi"></span> Button </a> 
            <a href="#" class="button orange"> <span class="locator"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button magenta"> <span class="rss"></span> Button </a> 
            <a href="#" class="button magenta"> <span class="cloud"></span> Button </a> 
            <a href="#" class="button magenta"> <span class="download"></span> Button </a> 
            <a href="#" class="button magenta"> <span class="trash"></span> Button </a> 
            <a href="#" class="button magenta"> <span class="rack"></span> Button </a>  
            <a href="#" class="button magenta"> <span class="map"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button cyan"> <span class="setting"></span> Button </a> 
            <a href="#" class="button cyan"> <span class="identity"></span> Button </a> 
            <a href="#" class="button cyan"> <span class="navigation"></span> Button </a> 
            <a href="#" class="button cyan"> <span class="gallery"></span> Button </a> 
            <a href="#" class="button cyan"> <span class="email"></span> Button </a> 
            <a href="#" class="button cyan"> <span class="users"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button red"> <span class="calendar"></span> Button </a> 
            <a href="#" class="button red"> <span class="link"></span> Button </a> 
            <a href="#" class="button red"> <span class="time"></span> Button </a> 
            <a href="#" class="button red"> <span class="folder"></span> Button </a> 
            <a href="#" class="button red"> <span class="tag"></span> Button </a> 
            <a href="#" class="button red"> <span class="share"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button black"> <span class="lock"></span> Button </a> 
            <a href="#" class="button black"> <span class="unlock"></span> Button </a> 
            <a href="#" class="button black"> <span class="mic"></span> Button </a> 
            <a href="#" class="button black"> <span class="love"></span> Button </a> 
            <a href="#" class="button black"> <span class="star"></span> Button </a> 
            <a href="#" class="button black"> <span class="comment"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button green"> <span class="like"></span> Button </a> 
            <a href="#" class="button green"> <span class="phone"></span> Button </a> 
            <a href="#" class="button green"> <span class="flag"></span> Button </a> 
            <a href="#" class="button green"> <span class="adduser"></span> Button </a> 
            <a href="#" class="button green"> <span class="attach"></span> Button </a> 
            <a href="#" class="button green"> <span class="glass"></span> Button </a> 
        </p>
    </div>
    <div data-for="rounded">
        <p>
            <a href="#" class="button rounded orange"> <span class="edit"></span> Button </a>
            <a href="#" class="button rounded orange"> <span class="upload"></span> Button </a>
            <a href="#" class="button rounded orange"> <span class="storage"></span> Button </a> 
            <a href="#" class="button rounded orange"> <span class="photo"></span> Button </a> 
            <a href="#" class="button rounded orange"> <span class="help"></span> Button </a>  
            <a href="#" class="button rounded orange"> <span class="locator"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button rounded magenta"> <span class="print"></span> Button </a> 
            <a href="#" class="button rounded magenta"> <span class="gadget"></span> Button </a> 
            <a href="#" class="button rounded magenta"> <span class="download"></span> Button </a> 
            <a href="#" class="button rounded magenta"> <span class="trash"></span> Button </a> 
            <a href="#" class="button rounded magenta"> <span class="rack"></span> Button </a> 
            <a href="#" class="button rounded magenta"> <span class="map"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button rounded cyan"> <span class="setting"></span> Button </a> 
            <a href="#" class="button rounded cyan"> <span class="identity"></span> Button </a> 
            <a href="#" class="button rounded cyan"> <span class="navigation"></span> Button </a> 
            <a href="#" class="button rounded cyan"> <span class="gallery"></span> Button </a> 
            <a href="#" class="button rounded cyan"> <span class="email"></span> Button </a> 
            <a href="#" class="button rounded cyan"> <span class="users"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button rounded red"> <span class="calendar"></span> Button </a> 
            <a href="#" class="button rounded red"> <span class="link"></span> Button </a> 
            <a href="#" class="button rounded red"> <span class="time"></span> Button </a> 
            <a href="#" class="button rounded red"> <span class="folder"></span> Button </a> 
            <a href="#" class="button rounded red"> <span class="tag"></span> Button </a>  
            <a href="#" class="button rounded red"> <span class="share"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button rounded black"> <span class="lock"></span> Button </a> 
            <a href="#" class="button rounded black"> <span class="unlock"></span> Button </a> 
            <a href="#" class="button rounded black"> <span class="mic"></span> Button </a> 
            <a href="#" class="button rounded black"> <span class="love"></span> Button </a> 
            <a href="#" class="button rounded black"> <span class="star"></span> Button </a> 
            <a href="#" class="button rounded black"> <span class="comment"></span> Button </a> 
        </p>
        <p>
            <a href="#" class="button rounded green"> <span class="like"></span> Button </a> 
            <a href="#" class="button rounded green"> <span class="phone"></span> Button </a> 
            <a href="#" class="button rounded green"> <span class="flag"></span> Button </a> 
            <a href="#" class="button rounded green"> <span class="adduser"></span> Button </a> 
            <a href="#" class="button rounded green"> <span class="attach"></span> Button </a> 
            <a href="#" class="button rounded green"> <span class="glass"></span> Button </a> 
        </p>
    </div>
</div>

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

 

CSS

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

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

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

VIP кнопка на css3VIP кнопка на css3

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

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

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....
Интересные публикации:

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

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

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

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....
  • Текущий 1.50/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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