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

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

ОБСУЖДЕНИЕ

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

Красивые кнопки для вашего сайта на css3
Просмотров: 962  Скачан: 188 раз  Комментариев в теме: 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" />
Материалы по теме:

Социальное меню с подписью на css3Социальное меню с подписью на css3

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

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

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

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

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

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

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

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

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

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

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

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

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

Design StudioDesign Studio

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

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

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

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

Горизонтальное меню в темном стиле с выпадающими пунктами....

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

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

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

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

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


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