Объемная кнопка


Содержание

Создание кнопки в фотошопе

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

Кнопка может быть разного назначения и применения к примеру для сайта, программного интерфейса. Кнопка для сайта или интерфейса, если следовать всем правилам должна иметь 3 — 4 состояния. Почему спросите три или четыре это зависит от того будут ли какие-то состояния кнопки совпадать, а также имеется ли необходимость в четвертом состояние.

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

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

Давайте рассмотрим эти четыре состояния:

  1. Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
  2. Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
  3. Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
  4. Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).

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

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

При помощи стиля слоя зальем форму кнопки линейным градиентом для этого идем слои > стиль слоя > наложение градиента либо дважды кликнем по слою с формой кнопки.

Создадим объем и тень для нашей кнопки при помощи копирования нашего слоя. Для этого, перетащите наш слой с кнопкой на пиктограмму (иконку) создать новый слой, либо сделайте наш слой с кнопкой активным после чего идем в слой > создать дубликат слоя. Проделаем это действие дважды. После чего назовем слои кнопка, объем, тень. После чего кликнем на слое тень правой кнопкой мыши и отчистим стиль слоя, проделаем тоже самое со слоем объем. Затем поменяем цвет у слоя объем. И сдвинем слои вниз при помощи инструмента перемещение (V).

Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.

Теперь доработаем слой с тенью. Идем слой > растрировать. Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.

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

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

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу. Продублируем группы для остальных состояний кнопки, для этого идем слои > дубликат группы и даем название состояния кнопки. Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

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

Далее отредактируем состояние кнопки при нажатие. У этой кнопки отредактируем наложение градиента как и в предыдущем состояние, также нужно поставить галочку на инверсия плюс уменьшим объем за счет чего у нас создастся впечатление что при нажатие кнопка вдавливается. Чтобы уменьшить объем нам придется выделить слои объем и тень, так как наша тень также станет меньше, и при помощи инструмента перемещение (V) стрелочкой на клавиатуре поднимем их вверх.

И наконец, сделаем кнопку в активном состояние. Для этого необходимо изменить цвет наложения градиента как у кнопки наведение, а также убрать тень и объем как у кнопки нажатие. Как это сделать мы уже знаем, скажу только, что активной кнопке градиент нужно задать другого цвета, чтобы она была заметна на фоне остальных кнопок. Можно конечно поменять еще и цвет у нашей надписи, но я этого делать не буду.

Илон Маск рекомендует:  Операции управления ошибками

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

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались ;)

Итак из этой статьи вы узнаете:

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

Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.

Но давайте по порядку.

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

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


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

В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

Но зачем это нужно. Все гораздо проще и понятнее.

Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —

Как сделать кнопку в HTML?

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

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов

Объемная кнопка

Сборник HTML, CSS, JavaScript/jQuery компонентов

Большая коллекция: более 100 кнопок для сайта с различными эффектами

Здесь мы собрали и продолжаем регулярно пополнять коллекцию бесплатных кнопок для сайта с различными эффектами при помощи HTML и CSS (CSS3 & HTML5), а также в некоторых разработках присутствует немного JavaScript (jQuery). Hover-эффекты, эффекты при нажатие, 3D и так далее… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

Потрясающая анимированная 3D кнопка на CSS3

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

Вы можете увидеть правильное отображение в браузере Chrome. К сожалению Firefox, например, не показывает последнее свойство(3D искажение).

Пример анимированной кнопки можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

В коде HTML у нас будет только ссылка и ничего более, всё остальное мы допишем в CSS:

CSS часть

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

Здесь нет пока что ничего особенного. Просто кнопка и основные стили. А вот дальше добавим градиент…

CSS3 градиент

Для того чтобы градиент мы я не буду писать с нуля, а лишь сгенерирую через Gradient Generator чтобы сократить время. Вы также можете воспользоваться таким же сервисом(подробнее какие сервисы бывают вы найдете в моей статье здесь).

Затем с помощью этих цветов для создания градиента: #609bcb( ) и #4a85b5( ). Большая ошибка начинающих веб-дизайнеров делать градиент очень резким. Мы же просто хотим добавить легкий эффект объема.

Затем необходимо добавить стиль при наведении на кнопку. Сделаем кнопку более светлой при наведении. Для этого используем еще раз градиент:

На изображении выше видно легкий градиент и эффект при наведении на кнопку.

Острые края выглядят не очень красиво. Давайте немного закруглим их:

Эти три строки делают закругление в 5 пикселей(px) в разных браузерах(при этом и старых также). Не делайте радиус слишком большим, потому кнопка будет выглядеть немного странно.

Вот как выглядит наша кнопка на данный момент.

Добавим тени

Сейчас, чтобы текст сделать частью этой кнопки, применим для текста тень:

Далее добавим тень нашей кнопке:


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

Сейчас у нашей кнопки присутствует эффект объема. Вы можете убедиться в этом на изображении ниже:

Еще больше теней

Добавим еще теней для более реалистичного отображения кнопки:

В итоге получили:

Анимация при клике

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

Добавим тени, для большей реалистичности:

Изменение размера формы при нажатии

При нажатии на кнопку, чтобы сохранить эффект объема, необходимо уменьшить тень:

Добавляем анимацию при нажатии

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

Сейчас кнопка приходит в исходное состояние как мы и хотели.

Илон Маск рекомендует:  Атрибут coords в HTML

Немного 3D

Мы можем сделать кнопку еще более необычной, добавив ей свойства 3D преобразования:

Жаль это свойство не работает во всех браузерах как надо.

И последнее что мы сделаем, это добавим эффект для кнопки:

Сейчас создается впечатление что кнопка действительно находится в трехмерном измерении(тестируйте в браузере Chrome):

Выводы

В течение данной статьи мы создали очень красивую анимированную 3D кнопку с помощью чистого CSS3 без применения Javascript. Безусловно такие кнопки повышают качество сайта. Используйте ее ��

3D кнопки с помощью CSS3

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Заметка автора: Orman любезно разрешил нам кодировать любую из его фриби, так что в будущем ждите еще туториалы!

Шаг 1: Создаем документ HTML

Мы начнем с создания нового документа HTML. Он будет основан на HTML5 boilerplate для того, чтобы у нас была удобная отправная точка. Теперь мы добавим список с ссылками. Вот в принципе и все, спасибо CSS3 за то, что мы не должны использовать дополнительные дивы и спаны.

Каждому пункту списка мы присвоим класс ‘buttons’. И так как Orman использовал различные цвета, мы назначим каждой кнопке свой собственный цвет в виде класса.

Это все, что нам понадобится на данном этапе.

Шаг 2: Основные правила CSS

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

Теперь применим правила для различных цветов. Например, для серого. Все остальные цвета можно посмотреть в демо.

У вас должно получиться что-то вроде этого. Выглядит довольно-таки солидно, если на дворе 2008 г.

Шаг 3: Двойные рамки!

Если вы внимательно посмотрите на конечный результат, то увидите, что по периметру всей кнопки расположена тонкая линия. Для осуществления этого эффекта мы будем использовать псевдо-элементы :before и :after.

При добавлении цвета кнопки выглядят гораздо лучше.

Шаг 4: Немного магии CSS3


Теперь приступим к непосредственной части CSS3. Начнем с закругленных углов:

Естественно элементы :before и :after так же нуждаются в закругленных углах.

И наконец мы применим градиенты, внутренню тень и тень для текста. Чтобы избежать багов в IE6, добавим state :visited.

Наш конечный результат, не так уж и плохо!

Шаг 5: Мы ничего не забыли?

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

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

Вот, что у нас получится:

Шаг 6 (по желанию): Старые браузеры

Итак, мы создали приятные кнопки CSS3, которые работают во всех современных браузерах. Но как быть с Internet Explorer 8 и ниже. В этих браузерах нет поддержки ни теней для текста, ни градиентов.

Для решения этой проблемы мы можем использовать javascript библиотеку Modernizr, которая может определять, поддерживает ли ваш браузер CSS3 и HTML5. Библиотека не исправляет проблемы, она лишь предлагает альтернативный стиль.

Во-первых, мы создадим собственную версию Modernizr, чтобы не таскать за собой огромный javascript. Это можно сделать на их веб-сайте. Как только мы вставили javascript в наш документ, необходимо определить правила разных классов для альтернативного стиля. Мы будем использовать изображения для тех браузеров, которые не поддерживают border-radius и градиенты.

Заключение

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

Создаем объемную кнопку для сайта на CSS3

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

Кнопка достаточно простая и практичная, она создает эффект объемности с помощью трансформаций css. И так, приступим.

Шаг 1. HTML

Разметка достаточно проста, нам необходимо создать класс с параметром “button”.

Создать кнопки 3D с эффектом на чистом CSS

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

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

Создание 3D-кнопки CSS

Здесь HTML будет имеет ссылку на переход, что преобразуем в 3D-кнопку, что применим к ним класс zornet_ru_3d, который определим в CSS.

В CSS также определим цвет фона и цвет границы, чтобы дать реальный 3D-вид, мы применим тень окна с цветом более темного оттенка.

.zornet_ru_3d <
position: relative;
width: auto;
display: inline-block;
color: #f9fafb;
text-decoration: none;
border-radius: 5px;
border: solid 1px #dc911a;
background: #d67a29;
text-align: center;
padding: 17px 21px 14px;
margin: 15px;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
-webkit-box-shadow: 0px 7px 0px #a94808;
-moz-box-shadow: 0px 6px 0px #d35400;
box-shadow: 0px 7px 0px #c15107;
>

.zornet_ru_3d:active <
-webkit-box-shadow: 0px 2px 0px #d35400;
-moz-box-shadow: 0px 2px 0px #d35400;
box-shadow: 0px 2px 0px #d35400;
position:relative;
top:4px;
>

Илон Маск рекомендует:  Предопределённые константы msql

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

3D кнопки для сайта

Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.

Анимированные кнопки для сайта. Кнопки для сайта с 3D эффектом работающие на чистом CSS.

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

Кнопки с 3D эффектом на CSS

Стандартные кнопки

Default White Primary Success


Info Warning Danger Magick

Кнопки без текста

Большие кнопки

Для больших кнопок в атрибут class нужно добавить значение btn-lg

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

Кнопки по умолчанию

Кнопка по умолчанию Кнопка по умолчанию

Маленькие кнопки

Для маленьких кнопок в атрибут class нужно добавить значение btn-sm

Маленькая кнопка Маленькая кнопка

Очень маленькие кнопки

Для очень маленьких кнопок в атрибут class нужно добавить значение btn-xs

Доп. мал. кнопка Доп мал. кнопка

Чтобы добавить кнопку на сайт, вставьте в нужном месте на сайте HTML код кнопки. Код подходит для сайтов работающих на фреймворке Bootstrap. Так же кнопки будут работать если в CSS вашего сайта прописан класс btn и классы цветовых схем ( btn-primary , btn-success и т.д.), которые есть в бутстрапе.

HTML код кнопок

В теге href=»#» вместо # прописывается ссылка для кнопки.

В коде применены классы иконок из иконочного шрифта FontAwesome 4.7.0

Если на вашем сайте применяется версия иконочного шрифта FontAwesome 5 — просто замените в коде в теге i префикс класса fa на fas или fab .

Для правильного отображения кнопок добавьте в CSS файл следующий код:

Размеры кнопок заданы следующими стилями:

Если вы используете фреймворк Bootstrap 3, то эти размеры уже есть в нём и их добавлять не нужно.

4 простых эффекта CSS для кнопок

В данном уроке рассматриваются четыре очень простых кнопки CSS с эффектами анимации при наведении курсора мыши на них.

Общие установки

Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.

Для кнопок будет использоваться очень простой HTML код:

Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:

Увеличивающаяся кнопка

Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер — она увеличивается, показывая дополнительное сообщение.

Основной код CSS

Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.

Эффекты CSS3

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

Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.

Анимация CSS


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

Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.

Простое изменение тональности цвета

Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.

Основной код CSS

Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.

Эффекты CSS3

Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.

Анимация CSS

Анимация практически не отличается от предыдущего примера.

При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.

Сдвиг фонового изображения

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

Основной код CSS

Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0». При наведении курсора положение сдвигается по вертикали.

Эффекты CSS3

В данном примере нет ничего особенного — скругленные углы и тени.

Анимация CSS

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

Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.

3D имитация нажатия кнопки

Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.

Основной код CSS

Код CSS для нашей кнопки.

Эффекты CSS3

В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.

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

Объемные CSS кнопки для сайта

Доброго времени суток, дорогие друзья. Рад приветствовать вас на своем блоге. Сегодня я расскажу вам как сделать кнопку для сайта на CSS с красивым эффектом нажатия, наведения и градиента. Эти эффекты будут реализованы средствами CSS3. И сейчас разберем момент, как установить кнопку на сайт. Первое, что нужно сделать, это определить стили кнопки. Нужно открыть на редактирование файл style.css и внести в него этот код:

Можно сделать кнопку из 6 разных цветов. Это красный, синий, зеленый, оранжевый, желтый, бирюзовый. Чтобы применить цвет к кнопке, пропишите к ней название цвета:

Вот собственно и все. Не бойтесь экспериментировать. Главное всегда делать резервные копии файлов. Скачать кнопку для сайта можете здесь. вес всего 1 кб.
ДемоСКАЧАТЬ

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL