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

04 Июля 2012

altДорогие друзья сегодня публикую две подборки красивых css кнопок. Наверное у меня зависимость на всё красивом и то что сделано на чистом коде в интернете. Вот писал тоже интересный подобный материал - красивая форма подписки и тоже всё реализуется без участия изображений Улыбаюсь. Итак немного описания:

  • У каждого вида кнопок есть положения: пассивное, при наведении, нажатая.
  • Корректное отображение в популярных браузерах (Safari, Opera, Firefox, Chrome, в IE может отображаться некорректно)
  • Кнопки полностью сделаны на коде (без использования изображений), что уменьшает нагрузку на сервер и незначительно увеличивает скорость загрузки страницы

1. Первая подборка красивых CSS кнопок

alt

3D кнопки, при нажатии вдавливаются внутрь и создают эффект как будто их вдавили в экран, большой ассортимент цветов, что итак видно из демонстрирующей картинки. Автор этого зрелища - dimox за что ему хором Спа-си-бо ! Воспользуюсь моментом - наверно каждый из нас видел студии по созданию сайта, но недавно встретился сайт предлагающий переделку сайтов, согласитесь не часто такое встретишь.  Реализация не сложная для этого:

Вставка HTML

Вставляем html код в статью, в модуль или в другое место на вашем сайте (вам решать), если не получается в joomla вставить код, то вам - сюда

<button name="name" type="submit" class="submit">Отправить</button>

Вставка CSS + Демонстрация

Дабы не пугать вас количеством кода в статье Смешно и не нагружать страницу я нашёл альтернативу и разместил создал отдельную страницу где всё наглядно показано. Демонстрация красивых кнопок на CSS

2. Вторая подборка красивых CSS кнопок

alt

Очень красивые кнопки имеющие тоже 3 положения и фоновую текстуру сделанную на CSS. Реализуется так:

Вставка Html

Одна строка отвечает за одну кнопку, для ориентации смотрите атрибут - "class" чтоб понять какой цвет.

<a href="#" class="button button-brown"><span>Кнопочка</span></a>
<a href="#" class="button button-orange"><span>Кнопочка</span></a>
<a href="#" class="button button-purple"><span>Кнопочка</span></a>
<a href="#" class="button button-green"><span>Кнопочка</span></a>
<a href="#" class="button button-blue"><span>Кнопочка</span></a>
<a href="#" class="button button-red"><span>Кнопочка</span></a>

Вставка CSS

CSS код данных кнопок просто огромен поэтому было бы не целесообразно выкладывать их прямо в статье. CSS код я разместил в текстовом документе который предлагаю скачать.

Свои вопросы можете задавать в комментариях ниже, а также рекомендации по усовершенствовании. На этом всё, пока !

Комментарии  

 
0 # eldarbal 07.07.2012 16:34
у вас ошибка в заголовке поста или это специально? :-)
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Intelligent 07.07.2012 19:08
Нет это ошибка, просто пишу обычно ночью и клаву не видно приходится писать в слепую, вот и ошибка на ошибке :-)
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Николай 16.11.2012 12:31
Я посмотрел - кнопки пример1 неправильно отображаються во всех браузерах кроме Firefox
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Андрей 20.01.2013 10:42
Спасибо!

Очень красивые кнопочки.
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий


Защитный код
Обновить

Самые комментируемые материалы

Последние комментарии