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

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

ОБСУЖДЕНИЕ

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

Оригинальные кнопки с помощью css3
Просмотров: 1739  Скачан: 204 раз  Комментариев в теме: 0

Довольно оригинальные кнопки реализованные с помощью css3, фишка данной кнопки в её красивом эффекте. При наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается) выглядит здорово. Кнопки полноценно будут работать только в браузерах которые полноценно поддерживают css3.

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

 

HTML

<div class="container">
    <div class="button-row">
        <a href="#" class="button rounded gray effect-1">Большая CSS3 кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button square blue effect-2">Кнопка</a>
        <a href="#" class="button square green effect-2">Кнопка</a>
        <a href="#" class="button square red effect-2">Кнопка</a>
    </div>  
    <div class="button-row">
        <a href="#" class="button rounded blue effect-3">Кнопка</a>
        <a href="#" class="button rounded green effect-3">Кнопка</a>
        <a href="#" class="button rounded red effect-3">Кнопка</a>
    </div>
    <div class="button-row">
        <a href="#" class="button shape-1 blue effect-4">Кнопка</a>
        <a href="#" class="button shape-1 green effect-4">Кнопка</a>
        <a href="#" class="button shape-1 red effect-4">Кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button shape-2 blue effect-5">Кнопка</a>
        <a href="#" class="button shape-2 green effect-5">Кнопка</a>
        <a href="#" class="button shape-2 red effect-5">Кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button rounded blue effect-5">Кнопка</a>
        <a href="#" class="button square green effect-4">Кнопка</a>
        <a href="#" class="button shape-1 red effect-3">Кнопка</a>
    </div>
</div>

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

 

CSS

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

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

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

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

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

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

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

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

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

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

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

Горизонтальное меню в темном стиле с выпадающими пунктами....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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