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

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

ОБСУЖДЕНИЕ

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

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

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

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

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

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

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

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

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

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

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

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на css +30...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

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

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

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

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

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


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