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

04 Июля 2012

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

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

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

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

Вставка HTML

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

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

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

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

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

Очень красивые кнопки имеющие тоже 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

Спасибо!

Очень красивые кнопочки.

Ответить | Ответить с цитатой | Цитировать

 

 

# Beatris 24.08.2018 22:05

When time's up, throw out whatever he hasn't eaten.

Also visit my homepage ... dog feeding station plans: http://www.facemook.com

Ответить | Ответить с цитатой | Цитировать

 

Обновить список комментариев
RSS лента комментариев этой записи

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

Имя (обязательное)

E-Mail (обязательное)

Подписаться на уведомления о новых комментариях

Обновить

Отправить

Отменить