Как сделать кнопку css

Кнопки CSS. Краткий мануал с примерами

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

Псевдоэлементы ссылок

Еще немаловажную деталь в стилях buttons css играет hover эффект – это когда курсор мыши наводится на веб-элемент и при этом действие меняются его стили. То есть, допустим, есть кнопка с красным фоном и с надписью белого цвета. Это идет вид по умолчанию, когда к кнопке не применяются какие-либо действия. Но если мы наведём стрелку мышки на наш объект, то ее стили, заданные через псевдоэлемент hover, преобразовываются в иные, к примеру, белый фон и красный текст.

Таких псевдоэлементов ссылки насчитывается всего четыре, а прописываются они через двоеточие с тегом ссылки a:

псевдоэлемент Описание
a:link Стиль ссылки, которую еще не посещали (по умолчанию)
a:visited Стиль ссылки, которую уже посетили
a:active Стиль ссылки во время клика по ней
a:hover Стиль ссылки при наведение мыши на нее

Как сделать CSS кнопку

По сути, веб-кнопка — это обычная ссылка со стилями оформления CSS. Через разные свойства и значения указываются: отступы, выравнивание, цвет, тень и другие эффекты. Для создания кнопки необходимо, без этого никак, знания каскадной таблицы хотя бы на начальном уровне. CSS очень легко поддается изучению просто нужно желание, а если у вас нет этих знаний, то нет смысла что-либо делать.

Для примера сделаем простенькую кнопку, чтобы на начальном этапе был понятен принцип ее создания. Мы будем использовать тег ссылки <a> , а еще можно задействовать тег button или input, но у них немного другая специализация. Поэтому будем работать с тегом ссылки.

Первым делом идет разметка HTML, то есть тег ссылки. И для лучшей определенности дадим нашему элементу класс, к примеру, wsbutton.

Сейчас ссылка имеет вид обычного текста с подчеркиванием, нас такой результат не устраивает. Вот что мы делаем, прописываем стили оформления согласно своим пожеланиям.

Довольно все просто: в первом состоянии элемента (по умолчанию) задаем статичные стили. Это вид кнопки, которая будет находиться в нетронутом состоянии. Дальше для псевдоэлемента hover прописываем стили, которые будут применяться при наведении курсора мыши на нее.

Примеры кнопок CSS

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

Тянущаяся кнопка

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

Вот так выглядит схема создания нашего макета

Схема кнопки

Итак, с внешним видом определились! Теперь стоит определиться с требованиями для нашей кнопки, которые помогут создать оптимальный и валидный код:

  • кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
  • кнопка должна быть создана из тега input;
  • кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
  • для создания кнопки за основу берется HTML-код, без использования javascript;
  • соблюдение всех стандартов;
  • высокий показатель кроссбраузерности.

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

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

Просто длинный фон

Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки

картинки-для-первого-способа

После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:

Убедимся, что метод работает

Проверка в браузере

При использовании такого метода стоит помнить о том, что:

  • лечение для IE должно быть подключено через условные комментарии;
  • лучше использовать не 2 разные картинки, а одну объединенную – спрайт.

Метод можно назвать почти универсальным. Его нельзя будет использовать только в том случае, если уголки кнопки не будут иметь своего фона и будут прозрачными.

Модифицируем первое решение

Как указывалось выше, первый способ не может быть реализован с прозрачными углами. Подумав над этой проблемой я нашел решение, которое позволяет устранить эту проблему. Для этого нужно внести некоторые коррективы в наш код:

Если сделать все правильно, то результат получится такой же, как и в предыдущем методе.

В чем выигрывает этот метод?

  • можно использовать прозрачные уголки кнопки;
  • семантика кода более выгодна, так как текст кнопки относится к ее содержимому.

Однако в тоже время имеют место некоторые недостатки:

  • очень объемный код для одной кнопки.

Решение на CSS3

С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE

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

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Создаем CSS кнопку на сайте

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

1. Онлайн сервисы по созданию CSS кнопок.

В интернете есть очень хорошие онлайн сервисы по созданию CSS кнопок:

&#8211; &#8220;css-tricks.com/examples/ButtonMaker/&#8221;

2. Более подробно разберем создание CSS кнопки с помощью онлайн сервиса &#8220;css-tricks.com/examples/ButtonMaker/&#8221;.

Почему именно этот сервис &#8211; а потому что он будет &#8220;бессмертным&#8221; &#8211; так как автор выложил на своем сайте его код, который каждый может скачать и даже установить на свой сайт!

Скачать код данного сервиса можно и с моего сайта &#8211; скачать сервис по созданию CSS кнопки.

  1. Ползунки &#8211; регулируют размер кнопки и закругление углов;
  2. Top Gradient Color &#8211; цвет верхнего градиента;
  3. Bottom Gradient Color &#8211; цвет нижнего градиента;
  4. Top Border Color &#8211; цвет верхней границы кнопки;
  5. Hover Background Color &#8211; цвет кнопки при наведении на нее;
  6. Text Color &#8211; цвет текста;
  7. Hover Text Color &#8211; цвет текста при наведении на кнопку;
  8. Active Background Color &#8211; цвет кнопки при нажатии на нее.

Слева &#8211; можно увидеть как будет выглядеть CSS кнопка, а если нажать на нее, то увидим CSS код кнопки, который можно скопировать, по умолчанию он выглядит так:

Здесь по моему мнению, все прекрасно видно &#8211; что за что отвечает в CSS коде кнопки:

Во-первых, у кнопки есть три состояния:

1. Кнопка в состоянии покоя;

2. Когда на кнопку наведен курсор мыши &#8211; за него отвечает класс hover;

3. Когда мы кликаем по кнопке &#8211; за него отвечает класс active (данный класс мы почти не видим, однако, если воспользоваться эффектом задержки при переходе по ссылке &#8211; то можно насладиться им в полной мере).

И соответственно, для всех этих классов (hover, active) приписываются свои стили оформления цвет фона кнопки (background), цвет текста (color) и др.

Во-вторых, в данном коде видно использование различных свойств:

gradient &#8211; отвечает за градиент,

radius &#8211; закругление углов кнопки,

Продолжаем создавать кнопку &#8211; у нас есть CSS свойства &#8211; которые мы должны прописать в файле стилей &#8211; для сайтов на wordpress &#8211; это style.css &#8211; чтобы попасть в него заходим в панель управления wordpress, в левом меню выбираем пункт &#8220;Внешний вид&#8221; и его подпункт &#8220;Редактор&#8221;, справа в списке шаблонов находим файл &#8211; style.css и вставляем код CSS кнопки.

Далее следует создать ссылку с классом buttom (по умолчанию в CSS коде кнопки присутствует именно он) и вставить ее там, где мы хотим видеть данную кнопочку, для примера, создадим ее в сайдбаре &#8211; для сайтов на wordpress &#8211; панель управления, в левом меню пункт &#8220;Внешний вид&#8221;, его подпункт &#8220;Виджеты&#8221;, выбираем виджет с названием &#8220;Текст&#8221; и перетаскиваем его в сайдбар, а далее прописываем в нем следующее:

В итоге у нас получиться следующая кнопочка:

PS: Некоторые темы уже используют класс &#8220;button&#8221; в своих стилях, поэтому лучше поменять его на что-нибудь более оригинальное, например, добавить к нему цифры &#8211; &#8220;button777&#8243;&#8230;

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *