Делаем кнопку css. Введение в основы современных CSS кнопок. Поразительные CSS3 кнопки социальных сетей

Для начала необходимо скачать исходники, и выбрать тему оформления для кнопок. Вы можете взять то оформление, которое вам понравится. Для примера возьмём первую тему winona.

Скачать

Похожие статьи на эту тему:

Открываем в редакторе файл index.html из исходника, находим интересующий нас тег. В моем случае:

Из этого кода берём строку с классом button .

Вставляем код в любое необходимое место в файле с кодом нашего проекта между тегом .
Название кнопки измените на то, которое нужно вам. В моем случае название я изменю на “Открыть”

Копируем её и вставляем между тегами в индексном файле своего проекта.

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

В нашем случае это класс button-winona . Следовательно, будут добавляться стили с названием winona.

Это очень удобно, т.к. если вам захочется сменить оформление кнопок, то нужно будет заменить лишь название дополнительного класса в теге . А стили уже прописаны в файле button.css !

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

Демо Ι

Код HTML для кнопок

HTML код мы будем использовать очень простой. Для каждой из кнопок мы зададим отдельные классы. А так же зададим классы для применения эффекта при наведении и активации нашей будущей кнопки. В общем вот сам код:

Button :hover :active Button :hover :active Button :hover :active Button :hover :active

Стили CSS для всех кнопок

Разные браузеры некоторые стандартные правила CSS отображают немного по разному. По этому в следующем коде CSS мы сбросим все стили, и добавим некоторые значения по умолчанию. Вот как выглядит код:

Button { display: inline-block; margin: 0 10px 0 0; padding: 15px 45px; font-size: 48px; font-family: "Bitter",serif; line-height: 1.8; appearance: none; box-shadow: none; border-radius: 0; } button:focus { outline: none }

Это совсем не сложно. Ну а сейчас давайте подробнее рассмотрим каждый из 4 стилей наших стильных кнопок.

Плоские кнопки залитые фоном

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

На этом изображении показано три состояния кнопки, обычное (по умолчанию), при наведении и при клике или же действии:

CSS код этих кнопок очень прост. Это огромный плюс мне кажется:

Section.flat button { color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; } section.flat button:hover, section.flat button.hover { background-color: #346392; text-shadow: -1px 1px #27496d; } section.flat button:active, section.flat button.active { background-color: #27496d; text-shadow: -1px 1px #193047; }

Стиль кнопок с бордюрами или границами

Этот стиль кнопок находится в то же классе, что и плоские кнопки Единственное различие лишь в том, что здесь мы убираем заливку, а вместо неё задаём правила для отображения бордюра кнопок. Вот на этом изображении всё ясно показано:

И как обычно код CSS очень прост, мы просто добавляем правила для появления бордюра:

Section.border button { color: #6496c8; background: rgba(0,0,0,0); border: solid 5px #6496c8; } section.border button:hover, section.border button.hover { border-color: #346392; color: #346392; } section.border button:active, section.border button.active { border-color: #27496d; color: #27496d; }

Кнопки с тенью и градиентом на CSS

Этот стиль кнопок можно смело назвать уже устаревшим, но и сейчас его можно встретить на просторах интернета. Если эти кнопки подходят под стиль Вашего сайта, то они именно для Вас. Они тоже делаются очень просто, вот изображение:

В CSS мы будем использовать правила тень и заливки градиента. При наведении тень будет появляться вокруг кнопки а при нажатии внутри.

Section.gradient button { color: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; border: none; border-radius: 15px; } section.gradient button:hover, section.gradient button.hover { box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; } section.gradient button:active, section.gradient button.active { box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; }

Стильный эффект нажатия

Этот стиль тоже сейчас пользуется большой популярностью и широко используется в дизайне сайтов. Пользователю кажется, что кнопка ка будто и правда нажимается. Вот на изображении подробно видно:

CSS здесь немного будет сложнее и требует использовать немножко математики. Но и это можно с лёгкостью понять. В общем не так уж и всё страшно. Под кнопкой мы поместим не размытую тень, что бы она дала эффект 3D кнопки или же казалась немного выпирающей. При наведении на кнопки мы сделаем фон темнее. А когда пользователь будет нажимать на кнопку мы изменим в стилях позицию самой кнопки. А чтобы это всё выглядело более эффектно и плавно мы добавим CSS3 трансформацию (translateY). Таким образом кнопка будет плавно опускаться вниз. А вот и сам CSS код:

Section.press button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; } section.press button:hover, section.press button.hover { background-color: #417cb8 } section.press button:active, section.press button.active { background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); }

Демо Ι

Заключение

Вот и всё! Теперь у Вас есть стильные и современные кнопки, которые Вы можете использовать для Ваших потребностей. Естественно Вы можете их изменять до не узнаваемости, это ведь только самый простой пример реализации подобного рода кнопок. Надеюсь, что Вам понравился этот урок. До скорых встреч!

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.

В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.

1. Super Awesome Buttons.

Данный набор кнопок использует набор css3 а также раскраску RGBA.

Добавить данный набор кнопок к себе на страницу не сложно, необходимо подключить css шаблон и добавить необходимые классы к ссылкам, чтобы изменить их цвет, форму итд.

Пример подключения:

Super Awesome Button » Awesome Blue Button » Awesome Magenta Button » Awesome Red Button » Awesome Orange Button » Awesome Yellow Button »

2. Google Buttons.

За основу данных кнопок была взята главная страница Google.com. Они также просты и минималистичны.

Пример подключения:

Search Google I"m Feeling lucky

3. CSS3 Gradient Buttons.

Кнопки очень похожи на Super Awesome Buttons о которых говорилось выше. Данный набор представлен несколькими цветами (9 цветов) и различными формами.

Пример подключения:

Rectangle or Rounded Can be Medium or Small Button Tag Span

H3

4. Kick-Ass CSS3 Button.

Данная кнопка не является самой интересной с точки зрения дизайна, однако по ссылке ниже вы сможете ознакомиться с видеоуроком по созданию подобных кнопок, что будет полезно начинающим web-разработчикам.

5. Pure CSS social media icons.

Этот набор является набором иконок социальных сетей, нежели кнопок. Набор представлен десятью иконками социальных сетей среди которых Facebook, Twitter, Flickr и прочие.

Пример подключения:

• Facebook
• Twitter
• RSS
• Flickr
• Delicious
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Extremely fancy CSS3 buttons.

Все владельцы iOs устроиств несоменно узнают данные кнопки, подобные кнопки присутствуют в iOs устроиствах начиная с первых версий. Эти кнопки, как и многие здесь представленые имеют настройки цвета, размера и сделаны на чистом css3.

Пример подключения:

Post

7. BonBon: Sweet CSS3 buttons.

Вы прирожденный сладкоежка? Тогда эти кнопки придуманы для вас. Сделаны они так, что их так и хочется съесть, или в конце концов применить в своем проекте. Различные цвета, формы, состояния вам несоменно понравятся.

Пример подключения:

Label

8. Realistic Looking CSS3 Buttons.

Интересный набор кнопок, строгие цвета, закругления, несомненно заслуживает внимания.

Пример подключения:

Pushit

9. Simple CSS3 Github buttons.

Реализацию подобных кнопок вы уже видели ранее на github.com , очень просты в установке, удобны и минималистичны. Также возможно добавление к кнопкам иконок.

Пример подключения:

This is a Button This is a Pill Button Divide by Zero

10. Flexible CSS3 toggle buttons.

Эти Css3 кнопки сделаны очень симпатично, но не практичны, тк реализованы только с поддержкой Firefox, остальные браузеры увы не поддерживаются.

Пример подключения:

Я отобрал некоторые кнопки CSS , которые, на мой взгляд, могут быть использованы в веб-проектах.

Генератор кнопок CSS3

Посмотрите на генератор CSS3 кнопок от Sanwebe :

Розовая кнопка CSS3 со шрифтом Pacifico

Симпатичная розовая кнопка (не считая небольшого кода jQuery для проигрывания музыки и изменения внутреннего текста ) полностью создана на основе CSS3 :

Коллекция 3D кнопок

Коллекция 3D кнопок , созданная с помощью CSS3 :

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

Отличные социальные кнопки, выполненные с помощью CSS3 и шрифта для иконок:

Анимированные CSS3 кнопки

Анимированные CSS кнопки с фоновыми узорами. Могут не работать в браузерах Firefox 3.6 и IE10 :

Круглые анимированные кнопки CSS3

Еще одни анимированные кнопки, в которых поворот текста при наведении мыши дает по-настоящему привлекательный эффект:

Кнопки Clean Circle

Вот еще один пример круглых кнопок CSS3 :

Кнопки-переключатели на CSS3

Хорошо выполненные переключатели, созданные с помощью CSS3 и шрифта иконок:

Анимированная кнопка CSS3

Симпатичная трехмерная кнопка, созданная с помощью CSS3 и шрифтов Google :

Эффекты кнопок CSS3

Эти кнопки демонстрируют анимации, использующие различные свойства CSS3 :

Глянцевые кнопки CSS3

Теперь можно быть абсолютно уверенным, что глянцевые кнопки можно легко создать при помощи CSS3 , больше никакого Photoshop :

Трехмерные кнопки CSS3

Удивительно, что можно сделать с помощью псевдоэлементов CSS3:before и :after . Оцените поразительные трехмерные кнопки:

Переключатель CSS3

Пример кнопки-переключателя на CSS3 без использования JavaScript :

Эффект трехмерной переворачивающейся кнопки

Эффект трехмерной переворачивающейся при нажатии кнопки, созданной с помощью CSS3 :

Брендовые кнопки

Красивые кнопки CSS популярных брендов, использующих иконки bootstrap :

Темная круглая кнопка

Круглая кнопка с использованием jQuery для придания эффекта капли при нажатии на кнопку:

Переключатель CSS3

Переключатель, созданный с помощью CSS3 :

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

Коллекция плоских кнопок CSS на все случаи жизни, без анимации и эффектов:

Кнопки общего доступа в социальных сетях

Более привлекательная версия кнопок общего доступа, но без функционала. По версии разработчика, должны работать в IE7+ :

Рождественская кнопка

Рождественская CSS кнопка , использующая data:urls – метод для встраивания изображения прямо в документ:

Мягкая кнопка

Круглая глянцевая кнопка, созданная с помощью CSS3 :

Мягкая кнопка Soft Button

Кнопки используют только символы Unicode , что позволяет использовать текстовые или иконочные шрифты:

Крупные трехмерные анимированные кнопки CSS3

Еще один набор трехмерных анимированных CSS кнопок для сайтов. Анимация выполнена с помощью свойств animation и keyframes :

Металлические CSS3 кнопки

Коллекция металлических CSS3 кнопок , символы на которых были созданы с помощью шрифта pictos с использованием @font-face . Для металлического эффекта были задействованы свойства box-shadow и linear-gradient :

Круглые CSS3 кнопки

Еще одна коллекция круглых анимированных кнопок на CSS3 :

CSS3 кнопки социальных сетей с возможностью нажатия

Кнопки используют простые CSS3 свойства , такие как gradients , box-shadows , text-shadows и так далее. Состояние «ожидание » и «активное » также включены в этот набор:

Простые CSS3 кнопки

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

Трехмерная кнопка загрузки

Эта трехмерная кнопка использует трансформацию perspective . Она работает только в браузерах на основе webkit :

Поразительные CSS3 кнопки социальных сетей

Большая кнопка

Солидная глянцевая CSS3 кнопка с эффектом тени внизу. Для кнопки используется шрифт под названием Sansita One из коллекции Google :

Простые кнопки

Несколько простых CSS кнопок :

CSS3-кнопки социальных сетей

Простые CSS кнопки

Набор незамысловатых CSS кнопок . Они просты в настройке и использовании. Их можно легко интегрировать с Font-Awesome или другой библиотекой:

Кнопки в виде покерной фишки

Пример простой кнопки в виде фишки для игры в покер. Она может быть также использована как кнопка с эффектом наведения:

Кнопка-ползунок

Концепт CSS кнопки-ползунка :

Кнопки меню администратора

Панель администратора (меню или навигация ) с использованием CSS3 и фреймворка fontawesome . При переключении на кнопку класс active добавляется с помощью jQuery :

Пришитая кнопка

Простая кнопка со строчкой, демонстрирующая возможности CSS3 без использования фонового изображения:

Вращающаяся кнопка

Круглая кнопка с вращающейся границей для индикации наведения курсора мыши:

Кнопка на CSS3

Мягкая кнопка, созданная с помощью CSS3 на основе этого примера :

CSS3 кнопка с выдвигающейся карточкой

Эти кнопки CSS выглядят как карты, выскальзывающие из рукава. Они могут использоваться для вывода информации, которая должна быть скрыта, пока пользователь не сделает выбор:

Анимация CSS3 кнопки в виде конфеты

Кнопка с анимацией для отображения состояния загрузки:

CSS3 переключатели

Красивые переключатели, которые используют jQuery для переключения класса:

Глянцевые кнопки

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