Кнопки CSS. Преимущества. Стили. Эстетичность
Наверное, ни один сайт не обойдется без отсылочных на другие свои страницы кнопок. Всем хочется привлечь именно на свой сайт внимание, и при этом используются самые разные средства. В веб-дизайне к их числу относят оформление кнопок, которые отличаются по различным параметрам — и по размерам, и по форме, и по эффектам и так далее.
Кнопки CSS наиболее удобны. За мгновения их стиль можно полностью изменить. И, конечно, это дает дополнительные возможности для оформления сайта в целом.
Для начала, чтобы не было путаницы и недопонимания, стоит разобраться в некоторых понятиях.
CSS, что это
CSS, означающее в переводе «каскадные таблицы стилей», на сегодняшний день является одной из основных технологий в интернете. Без этого языка вряд ли обойдется хоть один сайт.
CSS-код — это инструкции для браузеров, содержащие информацию, как отображать элементы на странице и где это делать.
Удобно хранить такие инструкции в отдельном файле, имеющем расширение .
css. С другой стороны, можно их поместить и в начале html-документа.
Кнопка на сайт. Какая она бывает
Кнопка, или графический элемент для навигации сайта, должна привлекать к себе внимание, чтобы посетитель увидел, что за ней прячется интересующая его информация, и помимо этого, на нее захотелось бы нажать. Когда она достаточно яркая и видная, то ее обязательно заметят. Такая кнопка может побудить посетителей, к примеру, оставить свой отзыв на сайте, или отправить заявку, подписаться на интересную рассылку, ну и, конечно, просто перевести на запрашиваемый пользователем раздел сайта.
Кнопки бывают статичные, анимированные, динамичные, со звуком и без него.
Их можно специально создавать, например, в фотошопе, и загружать на сайт изображение, а можно легко и быстро придумать их в CSS.
Кнопки CSS
Сделать такие кнопки очень просто. Большим преимуществом их применения является то, что их в любой момент, буквально за пару секунд, можно изменить до неузнаваемости.
Как известно, у кнопок есть три положения:
- покоя, когда с ней ничего не делают, а просто просматривают страницу;
- положения, с наведенным на нее курсором;
- и активации при нажатии.
В полной мере кнопки точно отобразятся в таких браузерах, как Firefox, Safari, Opera, Chrome. В то же время в Internet Explorer 9 кнопки не смогут отобразиться в полной мере. Например, закругления углов, тень текста и обводка вокруг кнопки не будут видны здесь из-за того, что такие свойства не поддерживаются этим браузером. Тем не менее, в целом CSS-кнопки для сайта выглядят достойно в этой версии браузера. В Internet Explorer 8 и других версиях ниже восьмой у кнопки не будет видна объемность, но, в то же время, сохранится видимость градиентов.
Если сравнить кнопку в виде изображения и кнопку CSS, то разница места на сервере будет совершенно несущественной. Но кнопки CSS уменьшат количество запросов к серверу, а вот это уже будет явным преимуществом по сравнению с кнопкой в виде изображения.
Получается, что даже если поддержка некоторых свойств CSS в браузерах Internet Explorer и отсутствует, то такие кнопки все равно будут выглядеть более выигрышными по сравнению с простыми изображениями, потому что единственное, чего лишатся пользователи в Internet Exporer, так это видеть эстетичность современных технологий по веб-дизайну. Но это совершенно несущественный недостаток.
Для каждого положения задается свой стиль. Эти стили прописываются в специальном файле .css или между тегами head в самой странице сайта.
Место кнопки на сайте
Между тэгами body записывается код:
где
id=”button2” здесь означает имя, присваиваемое кнопке,
href=”ГИПЕРССЫЛКА” здесь дается непосредственная ссылка на необходимый документ,
ТЕКСТ — печатается текст, который будет отображаться на кнопке.
Стили для кнопок
1. Стиль кнопки CSS записывается отдельно в документе или в самой странице:
2. Вначале записываются кнопки CSS, когда они находятся в покое:
3.
Далее записываются параметры, соответствующие кнопке, когда на нее наводят курсор. Если в данном случае изменяется только цвет и заливка, то и в стиле все остается прежним, кроме цвета и заливки:
4. И последний параметр касается положения кнопки, когда нажимается на нее курсор. Часто в таких случаях меняется лишь минимум, например, цвет, как и в этом случае:
CSS — красивые кнопки
Для создания кнопок можно использовать градиент. Лучше всего вначале кнопку нарисовать в каком-нибудь графическом редакторе, например, фотошопе, чтобы точно знать, какая она получится в итоге. Если использовать фотошоп, то в нем изначально уже имеются какие-то градиенты, но дополнительно можно загрузить еще и другие, такие, какие хотели бы, чтобы получились на сайте.
Экспериментируя с CSS-кодом и изменяя различные параметры, имеется возможность менять CSS красивые кнопки, и путем подбора, добиваться желаемого результата.
Этими параметрами служат:
— цвет текста на кнопке;
— размер текста и кнопки;
— цвет градиента кнопки;
— радиус углов кнопки;
— и цвет ее обводки.
Собственно говоря, можно спокойно, без страха, экспериментировать и выбирать наилучший вариант. Несмотря на небольшое количество параметров, можно создать очень разнообразные по своему стилю кнопки.
Анимированная кнопка для сайта — создаём красивые кнопки
Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.
По началу, когда я поставил цели Яндекс.Метрики на кнопки, я скорей хотел видеть сколько было переходов (именно по кнопке), но со временем я обратил внимание, что ссылки в статье по кликабельности в разы отличаются от анимированных кнопок. В общем, на такие кнопки кликают гораздо чаще.
И поэтому я советую использовать такие кнопки на Ваших сайтах и блогах. К тому же делаются они вовсе не трудно.
Итак, давайте приступать. И первый способ, который позволяет создать анимированную кнопку потребует от Вас создания графических заготовок и создания CSS стилей для этих кнопок. Второй же способ будет основываться только на CSS стилях.
Как создать анимированную кнопку с помощью графических заготовок
Если у вас есть навыки работы с графическими редакторами, — это только приветствуется. Если нет, берите готовые шаблоны, которые я подготовил для вас.
И вот видеоурок по первому способу:
Итак, открываем изображение кнопки в бесплатном онлайн-редакторе Pixlr Edition. Хотя, вы можете работать в любом удобно для Вас редакторе.
Открываем изображениеДля этого достаточно выбрать нужный файл и нажать кнопку «Открыть».
Если вы используете свои изображения, помните они должны быть в формате PNG (то есть поддерживать прозрачность).
Теперь нужно увеличить размер холста. А заодно и узнаем исходный размер изображения. Это нам понадобится в дальнейшем.
Изменение размера холстаИсходный размер 300х90 надо увеличить по вертикали, и получится 300х200. Если, что-то будет лишнее, после уберём.
Увеличив холст по вертикали, приступаем к дублированию слоя с кнопкой. Для этого достаточно просто перетащить имеющийся слой на иконку «Новый слой».
Дублирование слояДалее нужно сместить одно изображение ниже. Для этого используйте клавиши управления курсором. Изображения должны быть строго одно под другим. Иначе в дальнейшем получится немного не тот эффект на который Вы рассчитываете.
Смещение слоя внизЭффектов, которые Вы можете сделать огромное множество, это и изменение градиента, цвета, формы, прозрачности и так далее. Всё зависит от вашей фантазии.
В качестве примера, мы просто добавим призыв к действию на кнопке.
Слой с текстом также нужно дублировать и сместить ниже, на второе изображение кнопки. Делается это так же как описано выше. Должно получиться примерно так:
Две одинаковые кнопкиТеперь сама суть всего способа: верхнее изображение будет видно изначально, а нижнее будет появляться при наведении мышки на кнопку. Поэтому верхнее изображение нужно изменить.
В качестве примера я уменьшу непрозрачность надписи. Вы же можете сделать свой эффект. Воспользуйтесь своей фантазией и в Вас получится нечто оригинальное.
Эффект прозрачностиПосле того, как две кнопки готовы, нужно убрать всё лишнее. Для этого используйте инструмент
Все, изображение готово, сохраняем в формате PNG.
СохранениеСледующим этапом, загружаем изображение на сайт. Думаю, подробно останавливаться не будем, все и так знают, как это делать. Загрузив изображение, скопируйте ссылку на него в отдельный файл, она пригодится в дальнейшем.
Копируем ссылку на изображениеВот теперь в статье, где вы захотите вставить кнопку, надо добавить вот такой код:
<div><a href="ВАША ССЫЛКА" target="_blank" rel="nofollow"></a></div>
Обратите внимание на класс ссылки в данном коде 
Для разных кнопок, данный класс нужно будет менять и в статье и в таблице стилей. Но это делается только один раз, в дальнейшем при вставке кнопки, достаточно будет вставлять вышеуказанный код.
Далее открываем раздел «Внешний вид» > «Редактор» > «Таблица стилей»,
Добавление кода CSS в таблицу стилейгде в самом конце добавляем следующие стили.
/*Кнопка информация о курсе*/
.button_red {
display: block;
position: relative;
width: 271px;/*Ширина кнопки*/
height: 90px;/*50% высоты изображения*/
padding: 0px;
margin: 10px auto;
line-height: 94px;/*смещение по вертикали*/
border: 0px;
background: url(http://test.1zaicev.ru/wp-content/uploads/2014/06/buttons.png) 0 0 no-repeat;}/*путь к вашей кнопке*/
.button_red:hover { background-position: 0 -92px;}/*смещение фона*/
.t_c { text-align: center !important}Комментариями отмечены те параметры, которые вам придётся менять в зависимости от размеров кнопки.
Тут главное понять, что если изображение по высоте 180рх, вы указываете высоту (height) 90px. И с этим значением работаете, плюс минус несколько пикселей в параметрах background-position для улучшения эффекта.
Итак, первый способ готов, скачивайте архив с заготовками.
Как сделать анимированную кнопку с помощью CSS
Данный способ позволяет создавать красивые анимированные кнопки для сайтов, только на основе стилей CSS. Делать это можно и самому, но легче использовать онлайн генераторы для создания кнопок на CSS. Я пользуюсь вот этим сервисом CSSButton. Классный, многофункциональный сервис, но англоязычный и для новичка сложноват. Поэтому, для подготовки статьи я поискал в Интернете другие генераторы кнопок. В результате чего, я отобрал несколько сервисов, которые вы можете опробовать:
CSS3 Button Generator
Sciweavers
CSS Button Generator
CSS3 Linear Gradient Buttons Generator
Генератор кнопок CSS
Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения.
1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.
Видеоурок по второму способу создания анимированных кнопок:
В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.
Итак, начинаем.
Открываем главную страницу сервиса. Изначально перед вами будет предварительный вид кнопки и инструменты позволяющие сделать всевозможные настройки.
Предварительный вид кнопкиПервый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.
Параметры шрифтаСледующий раздел Background, относится к фону.
Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.
Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.
Параметры бордюровСледующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.
Параметры трансформацииСледующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.
Параметры анимацииПопробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.
После того как первоначальный вид кнопки настроен, можно переходить к следующему этапу. Это видоизменение кнопки при наведение курсора мышки. Для этого нажимаем на чекбокс, указанный на скриншоте.
Параметры при наведении курсора мышкиТеперь все изменения в настройках вы делаете для кнопки, которые будут отображаться при наведении курсора мыши.
И эти настройки зависят индивидуально от каждой кнопки. В качестве примера я изменил настройки поворота, градиента и цвета тени.
Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:
<a href="#">Текст ссылки</a>
Примечание: текст ссылки и будет надписью на кнопке. То есть надпись указанная в генераторе, — это лишь для предварительного просмотра.
После вставки ссылки в статью, в таблицу стилей вставляете полученный в генераторе стиль. В результате у Вас получится, ваша индивидуальная кнопка.
Вот наш пример:
РезультатНу что же, теперь вы знаете, как легко и достаточно быстро сделать анимированную кнопку для сайта или блога. Пробуйте и внедряйте, это того стоит. Если будут вопросы пишите в комментариях, постараюсь помощь.
На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.
С уважением, Максим Зайцев.
P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок». Я прошёл этот тренинг и рекомендую его всем — это без лишнего преувеличения, реальный способ заработка на партнёрских программах. Чем я в принципе и занимаюсь.
Тренинг Дениса Герасимова
10 классных дизайнов кнопок с использованием CSS3 (без использования JavaScript)
Кнопки являются одними из наиболее часто используемых тегов или элементов в HTML-документе. А использование CSS3 в сочетании с вашим воображением может привести к появлению множества красивых и уникальных кнопок, которые также могут сделать вашу веб-страницу очень интерактивной. У дизайнеров есть много причин для оформления кнопок, в том числе для того, чтобы сделать их более привлекательными и повысить удобство использования.
Здесь мы представляем вам несколько техник и руководств, которые помогут вам научиться стилизовать кнопки с помощью CSS. В этом посте показаны 10 результатов креативных и удивительных кнопок, которые вы можете напрямую копировать, вставлять и использовать.
1. Простая кнопка наведения
См. перо Простое наведение от Амита (@amti_cd) на КодПене.
Это крутая и часто используемая кнопка, вы можете использовать ее с любыми двумя красивыми цветами на ваш выбор.
2. Кнопка ночного режима (темный режим)
См. перо Ночной режим от Амита (@amti_cd) на КодПене.
Популярность темного режима растет день ото дня, и эта кнопка поможет вам в этом.
3. Кнопка со скругленной рамкой
См. перо Закругленная граница от Амита (@amti_cd) на КодПене.
Небольшой переход может сделать пользователя действительно счастливым, используя его и наслаждаясь вашей веб-страницей, просто добавив простую строку transition: 0. это может сделать вещи такими красивыми. Мы увидим больше об этом ниже.
2s easy ;
4. Кнопка градиента
См. перо Кнопка градиента от Амита (@amti_cd) на КодПене.
Кнопки градиента очень красивы, и их также очень легко кодировать. Градиенты CSS3 позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS3 определяет два типа градиента:
- Линейный градиент (это то, что мы использовали выше)
- Радиальный градиент (они определяются их центром).
С ними можно использовать очень крутые фоновые изображения.
5. Светящаяся кнопка
Светящаяся кнопка поможет привлечь внимание пользователя. А светящиеся кнопки выглядят очень круто и их легко реализовать.
Мы только что использовали свойство box-shadow , в основном свойство box-shadow CSS3 применяет тень к элементам.
6. Кнопка заполнения
Ну, вы можете назвать это как угодно, потому что главное не имя, а то, как круто он выглядит. Небольшие свойства :hover :after и transition из CSS3 могут творить чудеса.
7. Кнопка со значком
См. перо Кнопка со значком сообщения от Амита (@amti_cd) на КодПене.
Опять же, вы можете назвать это любым именем, но важно то, что они очень информативны и дают хороший пользовательский интерфейс.
content , его можно использовать только с псевдоэлементами :after и :before . Он написан как псевдоселектор (с двоеточием), но называется псевдоэлементом, потому что на самом деле он не выбирает что-либо существующее на странице, а добавляет что-то новое на страницу. Вы должны использовать их на своих веб-страницах.8. Кнопка загрузки
См. перо Кнопка загрузки от Амита (@amti_cd) на КодПене.
Они используются на большинстве веб-страниц, кнопки загрузки очень важны в наши дни, когда использование технологий так велико, использование приложений для Android и iOS значительно увеличилось. Не только это, для загрузки pdf, документов и т. д. нужна кнопка загрузки. Вам обязательно нужна красивая кнопка загрузки.
.9. Кнопка «Радуга» (просто наведите курсор, чтобы увидеть волшебство)
См. перо Радужная кнопка от Амита (@amti_cd) на КодПене.
Радужная кнопка так приятна для глаз. Они просто потрясающие и могут быстро произвести впечатление на пользователя. Мы использовали ключевых кадра CSS и анимацию, чтобы сделать это. Ну, правила ключевых кадров определяют код анимации. Например, вы можете указать, когда должно произойти изменение стиля, в процентах или с помощью ключевых слов «от» и «до», от начала 100% до начала 0%.
Анимация начинается с до, т. е. с 0%, и заканчивается на 100%, т. е. с.
10. 3D-анимация кнопок
См. перо 3D-анимация кнопок от Амита (@amti_cd) на КодПене.
Люди приходят в восторг всякий раз, когда видят или слышат слово » 3D» . Что ж, 3D-анимация очень увлекательна и выглядит действительно потрясающе.
Добавление небольшой анимации на веб-сайт может сделать его сногсшибательным, и вы должны их использовать.
Заключение:
Итак, это был список некоторых крутых кнопок, созданных с использованием только CSS3. С помощью свойств CSS3 можно многое сделать для создания действительно потрясающих эффектов наведения, 3D-эффектов, кнопок на основе анимации. Можно придумать новый, используя некоторые перестановки и комбинации со свойствами.
Надеюсь, один из них сделает вашу домашнюю страницу более привлекательной.
25 лучших бесплатных кнопок HTML CSS для веб-сайтов и приложений.
Эй, вы ищете лучший дизайн кнопки призыва к действию для вашего веб-сайта и приложений? Если да, то вы находитесь в правильном месте. Потому что в этом блоге я перечислил 25 лучших бесплатных кнопок HTML и CSS, которые вы можете использовать для разработки своего веб-сайта и приложений.
Если вы хотите сделать свой веб-сайт привлекательным и современным, вы также можете использовать формы CSS.
Итак, не теряя времени, приступим.
1. Кнопка Hover
Это одна из самых универсальных кнопок CSS, вы можете использовать ее на любом типе веб-сайта.
Дополнительная информация/загрузка
2. Кнопки CSS
Эти кнопки CSS используют только символы Unicode. Вы также можете использовать текстовые или иконочные шрифты, если хотите.
Сделано Сашей Майклом Тринкаусом
Дополнительная информация/скачать
3. Кнопки 3D CSS
Если вы ищете кнопку с плоскими цветами и трехмерными эффектами нажатия, вы можете попробовать ее.
Сделано Kanishk Kunal
Дополнительная информация/скачать
4. Кнопки CSS со скругленными углами
Эта кнопка CSS со скругленными углами имеет эффект наведения мыши. Вы можете использовать эту кнопку на любом типе веб-сайта.
Сделано Пали Мадра
Дополнительная информация/скачать
5. Кнопки CSS
Набор простых кнопок CSS. Их легко настроить и использовать. Вы можете легко интегрировать эти кнопки в любую часть сайта.
Сделано Sazzad
Дополнительная информация/скачать
6. Концепция кнопки
Эта классная маленькая кнопка CSS выглядит потрясающе и придает веб-сайту профессиональный вид.
Сделано Chris Deacy
Дополнительная информация/скачать
7. Микровзаимодействия Hover
В тени этой кнопки перемещайтесь с помощью курсора.
Дополнительная информация/загрузка
8. Нажимаемая, совместимая с iOS кнопка CSS
«Нажимаемая» кнопка CSS выглядит потрясающе на мобильных устройствах.
Сделано jemware
Дополнительная информация/загрузка
9. Эффект при наведении кнопки CSS
Эта кнопка CSS обеспечивает эффекты тени и глубины и хорошо смотрится на любом типе веб-сайта.
Сделано Юлией
Подробнее/Скачать
10. Простой эффект наведения на кнопку CSS
Простой, но красивый. В этом дизайне вся анимация выполняется за пределами кнопки
Сделано Андреасом Лундгреном
Дополнительная информация/скачать
11. Кнопки CSS
Эта кнопка CSS поставляется с множеством различных анимаций и хорошо смотрится на любом типе веб-сайта.
Сделано Rémi Lacorne
Дополнительная информация/скачать
12. Кнопка CSS со светящимся фоном
Эта кнопка CSS поставляется с градиентной цветовой схемой, вы также можете настроить ее в соответствии с вашим веб-сайтом.
Сделано Дханишем
Дополнительная информация/загрузка
13.
Анимация кнопок CSS Эта кнопка CSS обеспечивает различные эффекты анимации и отлично смотрится на всех типах веб-сайтов.
Сделано Alex Loomer
Дополнительная информация/скачать
14. Кнопки на чистом CSS
Эта кнопка CSS создана с использованием HTML и CSS и выглядит потрясающе на слайдерах.
Сделано Натаном Шмидтом
Дополнительная информация/скачать
15. Жидкая кнопка
Эта кнопка создает эффект жидкости и придает веб-сайту современный и креативный вид.
Сделано Waaark
Дополнительная информация/загрузка
16. Кнопка CSS
Эта кнопка CSS придает очень привлекательный вид веб-сайту любого типа и создана с использованием HTML, CSS и JavaScript.
Сделано Андреасом Дж. Виркусом
Дополнительная информация/скачать
17. Sass Button Border Hover Effect Mixin
Эта кнопка CSS обеспечивает эффект смешивания цветов на границе.
Сделано Giana
Дополнительная информация/загрузка
18. Приподнятые кнопки
Эти трехмерные кнопки CSS обеспечивают тонкую анимацию при наведении и нажатии.
Сделано Drew McDowell
Дополнительная информация/загрузка
19. Коллекция Creative Button Hover
Эти плоские кнопки CSS обеспечивают различные эффекты анимации. Вы можете использовать эти кнопки на любом типе веб-сайта.
Сделано Yasin Softaoğlu
Дополнительная информация/скачать
20. КНОПКИ CSS
Эти кнопки CSS используют привлекательную анимацию. Вы можете использовать эти кнопки на любом типе веб-сайта.
Сделано Дереком Морашем
Дополнительная информация/скачать
21. Кнопки социальных сетей
Это потрясающие анимированные CSS-кнопки при наведении, которые придают веб-сайту любого типа очень современный вид.
Сделано по DIN
Дополнительная информация/скачать
22.
Простые кнопки CSS Если вы ищете простую кнопку CSS, то обязательно попробуйте эту кнопку
Сделано Дэниелом Констансом
Дополнительная информация/скачать
23. 3D Кнопка CSS
7
Разнонаправленные кнопки CSS с эффектом скольжения при наведении.
Сделано Carlos G Notario
Дополнительная информация/скачать
24. CSS-кнопка с эффектом глубины
Если вы ищете дизайн квадратной кнопки для использования на своем веб-сайте, вы можете использовать эту кнопку. Он обеспечивает потрясающий внешний вид для любого типа веб-сайта.
Сделано Praveen Bisht
Дополнительная информация/скачать
25. Кнопка CSS Sliced
Эта кнопка CSS использует разделенную анимацию и выглядит очень привлекательно на любом типе веб-сайта.
Сделано Сарой
Дополнительная информация/загрузка
Итак, это все из этого блога. Надеюсь, вам понравился список из 25 лучших бесплатных дизайнов кнопок HTML и CSS, которые вы можете использовать для разработки своего веб-сайта и приложений.