Кнопки | CSS
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
- button имеет открывающий и закрывающий тег, а значит он может содержать дочерние теги,
- когда текст на кнопке один, а значение value при клике должно передаваться другое.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
- :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
- :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
- :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: 
А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд: 
Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
98 комментариев:
damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Это на CSS, а можно ещё добавить небольшой скрипт. segur Как мне нравится этот блог ! Этот сайт давно у меня в «золотых» закладках !
Спасибо за Ваши толковые статьи и примеры ! NMitra Благодарю за комментарий! Настроение сразу вверх растёт. Анонимный Спасибо большое автору, очень помогло на практике. NMitra Рада, что мои записи вам пригодились 🙂 Анонимный Если нахожу что-то полезное на сайте, всегда благодарю автора не словами, а кликами по всем рекламным блокам которые нахожу на странице. В этот раз пришлось искать все рекламные блоки. Спасибо автору. NMitra Повеселили по поводу «пришлось искать все рекламные блоки» 🙂 Спасибо, что заботитесь о моём благосостоянии и оценили статью. Алексей А онлаайн генератором можно создать кнопку под свой вкус http://phpguru.com.ua/servis/css3button/ русскоязычный генератор css3 кнопок. Не сочтите за спам но мне понравился! NMitra Проглядела много генераторов кнопок и не представляю как с их помощью можно сделать хоть что-то приемлемое. В статье я просто привожу примеры и надеюсь, что их код не будут брать целиком. Можно посмотреть как реализована тень текста на кнопках, как создаётся эффект нажатия, как сделать, чтобы один текст заменялся другим и при этом правильно выравнивался, какие цвета чаще всего используют, как сделать неполные боковые линии и т.п. Это именно черновой вариант, который можно и нужно изменять, как минимум высоту и ширину. Станислав Автору поклон за труды! Кладезь полезных решений для любого проекта. Выразил благодарность еще и переходом по рекламе — идея порадовала:) NMitra Благодарю, Станислав. Да, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color Анонимный Итересно автор открывал страницу своего материала хотябы в Safari? NMitra Открыл-открыл ))) Добавьте префикры -moz- и -webkit- к таким свойствам как transition, background разбейте на background-color и background-image и всё будет нормально. Или воспользуетесь SCSS, тот автоматом делает тоже самое. Я не нашла причин почему мне нужно было усложнять код. FOMUVI Сложно пройти мимо и не поблагодарить. Спасибо! Классная выборка кнопок, а главное много и все разные. Есть с чего выбрать и заточить под себя. Класс! NMitra Благодарю, что не прошли мимо! Анонимный Не работают стили для оперы, подскажите, что нужно сделать? NMitra Какой пример вас заинтересовал? Сергей Полежака очень понравилась button4, но некоторые браузеры ее не показывают почему то Алексей Хорошая статья с помощью нее сделал нормальную кнопку Анонимный Норм та так, спасибо Анонимный все супер, но как выставить фиксированные размеры кнопки? а то автоматом подгоняет под текст, т.е. под количество написанных букв. NMitra Для ширины указать width и text-align: center; Убрать padding-left и padding-right, например, так: padding: 15px 0.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. «Ура, оно») Максим Грачев Как изменит размер кнопки? NMitra padding — это отступ до границы border
width — ширина
height — высота
line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
font-size — размер шрифта NMitra Подбирайте значения под себя. В большинстве случаев достаточно изменить padding.
Одно значение: отступ от содержимого для каждого края.
Два значения: первое для вертикальных, второе — горизонтальных сторон.
Три значения для верхней/по бокам/нижней сторон.
Четыре значения: вверх/справа/низ/слева.
См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona Регина Спасибо! Очень круто! Серж Благодярю! огромный выбор классных кнопок! все стили подходят, можно выбрать для любого дизайна) Намного ускоряют верстку, отличная заготовка! Анонимный спасибо NMitra Пожалуйста, очень рада таким отзывам! Анонимный Хорошая статья! Подскажите, пожалуйста, как на анимированной кнопке button31 повернуть «стрелку» влево (она там направлена вниз). То, что нужно править второй блок я понял, в частности менять градусы и положения, но получается какая-то несуразица.
П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо — изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел — решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна. NMitra a.button31:after, a.button31:before content: «»;
position: absolute;
z-index: -1;
left: 0%;
top: -10%;
right: 0;
bottom: 0;
width: 30%;
height: 10%;
margin: auto;
background: #999;
box-shadow: 0 1px rgba(0,0,0,.1) inset, 0 1px #fff;
transform: rotate(-35deg);
>
a.button31:after top: 15%;
transform: rotate(-315deg);
> Дима a.button1 font-weight: 900;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 3px;
background:#4d6f91;
transition: 0.2s;
width:500;
Хочу чтобы кнопки были одной ширины а параметр width:500; нечего не изменяет NMitra display: inline-block;
width: 500px;
padding: .8em 0 calc(.8em + 3px);
text-align: center; Robomatic Спасибо больше, без воды, с примерами, кратко и по делу. NMitra Благодарю за отзыв! тотр спасибо, господи
NMitra :)) Max Огромное спасибо, сегодня пол дня пытался сделать подобную кнопку без плагина на wordpress, дома вечером с первого запроса в Google попал на Вашу страничку 🙂 Наконец то закрою вопрос с кнопочками! СПАСИБО! NMitra Благодарю за отзыв! Анонимный Подскажите пожалуйста, как вставить такую кнопку на страницу в вордпресс? Если не сложно, то расскажите по-подробнее, так как я еще не очень хорошо разбираюсь в этом (Пытался несколькими способами, описанными в интернете, не получилось) NMitra Смотрите в поиске Яндекса/Google
если планируется кнопка на многих страницах — «как изменить шаблон wordpress». Для кнопки или ссылки в файле php добавляете класс, например, А стили — в файл .css, например,
.button16
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Я, к сожалению, не изучала админку WP Владимир Левыкин Доброго времени суток ))) Сразу оговорюсь, я тока начинаю юзать joomla. Подскажите как правильно? и где нужно что прописать в шаблоне protostar что бы ваши код css применялся адекватно просто уже 3 день мыкаюсь не могу применить стиль. То шаблон разъезжается то кнопка везде где ненужно появляется )))) печаль беда )))). ( Я не волшебник, я тока учусь ) NMitra Владимир, доброе время суток. Не осерчайте, но вам сюда http://shpargalkablog.ru/p/comments-blog.html Эдуард Столько всего, я прям растерялся. Анонимный Поменяла кнопку на форуме php bb 3.0, а текст кнопки пропал, как его восстановить?
NMitra По-подробнее (пропал — стал прозрачным или был заменён на тот, что между тегами a?) или адрес страницы сайта Анонимный Пропал в прямом смысле слова, его совсем не видно, но кнопка работает.
NMitra Не, так не могу, адрес страницы сайта, пожалуйста Анонимный К сожалению сайт на локалке находиться, могу только код переслать, но здесь публиковать сайт не хочет. NMitra Добавьте на http://jsfiddle.net/ Анонимный Вот, готово https://jsfiddle.net/Ltuku5gn/ NMitra А где HTML? Анонимный классный сайт Анонимный А можно ваши кнопки сразу ставить на сайт или на форуме вставлять в ком? Они будут работать? (начинающий) Ирина Офигенно, спасибище. NMitra Начинающий, что вы имеете ввиду под «Будут работать»? Ваши кнопки изначально должны работать (перенаправлять куда-то посетителя, отправлять форму и т.п.), а это всего лишь украшение кнопок.
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
Анонимный Спасибо большое! (начинающий) stobuxov Спасибо, облазил пол интернета, самая лучшая подборка и описание, спасибо. NMitra Благодарю, стараюсь обращать внимание на интересные варианты Анонимный Здравствуйте. Отличная статья. Только хотелось бы уточнить у автора поподробнее о том, как скорректировать код (например для — Вдавленная кнопка), чтобы работало в браузере Safari. Я пока не смог понять, как правильно разбить background на background-color и background-image. Может автор показать правильно скорректированный код? NMitra Здравствуйте, например,
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
background-color: rgb(206, 220, 231);
background-image: linear-gradient(rgb(206,220,231), rgb(89,106,114)); Medoti Dorf Приветствую, спасибо за статью!
Подскажите, как сделать кнопку по всей ширине блока ?
a.knopka color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(212,75,56); /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
>
a.knopka:hover < background: rgb(232,95,76); >/* при наведении курсора мышки */
a.knopka:active < background: rgb(152,15,0); >/* при нажатии */ NMitra Здравствуйте!
a.knopka display: block;
text-align: center;
> Medoti Dorf Спасибо! Анонимный Не знаю, когда я наткнулся на эту статью и добавил ее в немногочисленные закладки — года 2 назад. За это время воспользовался примерами раз 20-30 точно! Спасибо автору, и низкий ей поклон! Анонимный По поводу SAFARI — я все сделал, но кнопка все равно показывается некорректно.
Не могли бы вы написать полностью обновленный код в ответе для кнопки — button22, тогда все станет понятно.
Спасибо.
NMitra Комментарий 71: спасибо за отзыв, для меня он важен!
Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/ Анонимный добрый день! скажите пожалуйста можно ли чтобы кнопка уже была нажата и была не активной. допустим из этого примера:
кнопка «button17»
за ранее буду очень признателен! спасибо! NMitra Добрый день, вместо
a.button17:focus:not(:active) <>
напишите
a.button17 <>
Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ). Анонимный Кто знает как делать, свяжитесь со мной по miheyzih@mail.ru Анонимный скопировал и вставил на свой сайт , кнопка не вышла, нужно что либо добавлять еще к этому коду?
Объясните как ребенку, т.к еще зелен в этих делах NMitra Посмотрите тут, пожалуйста, http://shpargalkablog.ru/p/comments-blog.html#html Анонимный Большое огромное спасибо автору блога. Андрей пивоварчик Привет, спасибо за кнопки. Но возникает небольшая проблема. В каждой из кнопок при наведении кроме подсветки и других эффектов всплывает какая-то красная линия. Как ее убрать подскажите плз. Сайт на wordpress , если это важно Андрей пивоварчик Заметил,что это происходит только на определенной теме wordpress NMitra Попробуйте для :hover дописать
outline: none; sawkow1 Спасибо Мастер, получилось красиво:
http://djk-tanzen.de/?mod=anmeld
Но на safari, к сожалению не работает. Unknown Отличный материал спасибо, но есть вопрос, возможно ли сделать например в кнопке button31, такой эффект, чтобы после нескольки секунд анимация заменялась на другую кнопку автоматически? NMitra Можно. Спасибо за идею! Но ваш вопрос требует несколько большего времени, чем я располагаю. Извините. http://shpargalkablog.ru/p/comments-blog.html Михаил Евсеев Лучшие! В закладки! Анонимный СПАСИБО ЗА ВАШ ТРУД. Анонимный Здравствуйте NMitra.Я новичок. Делаю сайт с помощью корсофтовского комплекса. Делать начал из «спортивного интереса». С текстами как то все сложилось а вот оформление хотелось бы улучшить. Задумал интерактивные кнопки. Воспользовался генераторами кнопок, потому как познания в НTML и CSS нулевые. Генератор выдал два кода НTML и CSS. Не могу объединить.Не хватает познаний. Буду признателен за помощь.Cпасибо.HTML: a href=’#’ Screen OrizzontaleСSS
.button border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
padding: 3.5px 7px;
-webkit-border-radius: 19px;
-moz-border-radius: 19px;
border-radius: 19px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #2c2e30 0 1px 0;
color: #11c217;
font-size: 17px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
>
.button:hover border: 4px solid #11c217;
text-shadow: #2c2e30 0 1px 0;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #ff6619;
>
.button:active text-shadow: #2c2e30 0 1px 0;
border: 4px solid #ff6619;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7));
background: -webkit-linear-gradient(top, #fafafa, #f7f7f7);
background: -moz-linear-gradient(top, #fafafa, #f7f7f7);
background: -ms-linear-gradient(top, #fafafa, #f7f7f7);
background: -o-linear-gradient(top, #fafafa, #f7f7f7);
background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%);
color: #11c217;
>
NMitra Здравствуйте, так в HTML добавляйте
Анонимный спасибо за кнопки — выглядят супер . Анонимный Очень помогло в работе ибо начинающий.
Однако, как отцентровать текст относительно иконки, что стоит перед кнопкой
height:40px; (высота кнопки)
line-height:40px; (незнамо что, но если равно высоте кнопки, то текст выравнивается по высоте относительно иконки слева)
Узнал только прочитав форум, надо чтобы height=line-height
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо. Анонимный Извиняюсь, но никак не получается создать кнопку например, высотой 24 пикселя с иконкой (24х24).
так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
a.button_main_ico float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover background-color: #BABABA;
>
a.button_main_ico:focus background-color: #D8D8D8;
>
a.button_main_ico:focus:hover background-color: #DFDFDF;
>
a.button_main_ico:before content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;
a.button_main_ico:before,
a.button_main_ico span content: url(../ico_L_ready.png);
vertical-align: middle;
>
пример https://jsfiddle.net/NMitra/533605pm/
теория http://shpargalkablog.ru/2012/04/vertical-align.html Анонимный NMitra — спасибо огромное за внимание и заданное направление.
Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины.
Пока разбираюсь.
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.
в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка
Тоже но без иконки:
Кнопка
(слово «класс» — поменять на английское а то тут не печаталось)
В CSS
a.button_main float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover background-color: #BA0000;
>
a.button_main:focus background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover background-color: #DF000;
>
.ico_name background-image: url(../ico_name.png);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-position: 0px -1px;
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
60 классных кнопок на CSS с анимацией
Кнопки являются важной частью веб-дизайна, поскольку они не только улучшают пользовательский интерфейс, но и влияют на внешний вид и эстетику веб-сайта. В этой статье вы найдете коллекцию лучших кнопок на CSS.
Будь то большие и широкие кнопки на главной странице или маленькие и незаметные в подвале, кнопки являются очень важным элементом дизайна для направления действий пользователей вашего сайте. Для корпоративного веб-сайта часто используется более сдержанный дизайн, в то время как в индустрии развлечений, как правило, используют более яркие и «кричащие» кнопки. Ниже представлены самые разные CSS кнопки, среди которых можно выбрать то, что подойдет для достижения вашей цели.
Также, многие веб-дизайнеры придают большое значение анимации при наведении курсора или фокусировке, поэтому у всех кнопок есть приятная анимация. Итак, приступим!
Все представленные здесь коды кнопок распространяются по лицензии MIT.
#1 Кнопка с эффектом свечения
CSS Button Hover Glow Effect by Kocsten on CodePen.
Написано на: HTML, CSS;
#2 Скругленная кнопка
Pure Css Button Hover effect by alticreation on CodePen.
Написано на: HTML, CSS (SCSS);
#3 Игристая кнопка
Bubbly Button by Nour Saud on CodePen.
Автор: Nour Saud;
Написано на: HTML, CSS;
#4 Кнопки с иконками
Icon buttons by Andrea Maselli on CodePen.
Автор: Andrea Maselli;
Написано на: HTML, CSS;
#5 Пузырящаяся кнопка
Blobs button by Hilary on CodePen.
Написано на: HTML, CSS (SCSS);
#6 Тонкие кнопки
Simple CSS Button Hover Effects by Natalia Reshetnikova on CodePen.
Автор: Natalia Reshetnikova;
Написано на: HTML, CSS;
#7 Кнопки с указателем загрузки
Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 on CodePen.
Написано на: HTML, CSS (SCSS), JS;
#8 Скругленная пульсирующая кнопка
CSS Button With Hover Effect by Raj Kamal Chenumalla on CodePen.
Автор: Raj Kamal;
Написано на: HTML, CSS (SCSS);
#9 «Шипучая» кнопка
CSS Fizzy Button by Jürgen Leister on CodePen.
Автор: Jürgen Leister;
Написано на: HTML (Haml), CSS (SCSS);
#10 Кнопка N° 045
Button N° 045 by Vitor Siqueira on CodePen.
Автор: Vitor Siqueira;
Написано на: HTML, CSS;
#11 Кнопка с пузырьками
Flush button by AbhishekBaiju on CodePen.
Написано на: HTML, CSS;
#12 Кнопочное представление
Button Concept by Shyam on CodePen.
Написано на: HTML, CSS (SCSS), JS (CoffeeScript);
#13 Разрезанная кнопка
CSS Sliced Button by Sarah on CodePen.
Написано на: HTML, CSS;
#14 Модные кнопки с иконками
Pure CSS Buttons by Ishaan Saxena on CodePen.
Автор: Ishaan Saxena;
Написано на: HTML (Pug), CSS (SCSS);
#15 Изменяющаяся кнопка
Css Button Hover #5 by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#16 Простая кнопка
CSS button by Tiberiu Raducea on CodePen.
Автор: Tiberiu Raducea;
Написано на: HTML, CSS (SCSS);
#17 Кнопка-перевертыш
Auto Width Css Button Flip by Alex Moore on CodePen.
Автор: Alex Moore;
Написано на: HTML, CSS (SCSS);
#18 Кнопка с цветной шторкой вправо
Css Button Hover #2 — Background by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#19 Замысловатые кнопки
CSS Button Effect by Alexandre do Vale on CodePen.
Автор: Alexandre do Vale;
Написано на: HTML, CSS, JS;
#20 Кнопки с откидывающейся крышкой
FlipCover CSS Mixin by Velina V Veleva on CodePen.
Автор: Velina V Veleva;
Написано на: HTML, CSS (SCSS), JS;
#21 Коллекция кнопок с эффектом при наведении
Collection of Button Hover Effects by David Conner on CodePen.
Автор: David Conner;
Написано на: HTML, CSS (SCSS);
#22 Кнопка с CSS эффектами: Анимированная рамка & Свечение
CSS Button Effect: Animated Border & Glow. by Anthony on CodePen.
Автор: Blade Multimedia;
Написано на: HTML, CSS;
#23 Кнопка с CSS эффектом при наведении
CSS BUTTON HOVER by Imran Pardes on CodePen.
Автор: Imran Pardes;
Написано на: HTML, CSS;
#24 Все еще на виду
Untitled by Alex Bodin on CodePen.
Автор: Alex Bodin;
Написано на: HTML, CSS;
#25 CSS Кнопка с кольцевым индикатором
Pure CSS Button with Ring Indicator by Cole McCombs on CodePen.
Автор: Cole McCombs;
Написано на: HTML, CSS;
#26 Кнопки с разными эффектами при наведении
Button Hover Effects by Kyle Brumm on CodePen.
Автор: Kyle Brumm;
Написано на: HTML, CSS (SCSS), JS;
#27 Кнопка с пузырьковым эффектом
Button bubble effect by Adrien Grsmto on CodePen.
Автор: Adrien Grsmto;
Написано на: HTML, CSS (SCSS), JS;
#28 Анимированная кнопка отправки данных
animation submit button by Valentin Galmand on CodePen.
Автор: Valentin Galmand;
Написано на: HTML, CSS (SCSS), JS;
#29 Кто не любит забавные кнопки?
CSS BUTTONS!! by Derek Morash on CodePen.
Автор: Derek Morash;
Написано на: HTML, CSS (SCSS);
#30 Перевертыш
Flipside by Hakim El Hattab on CodePen.
Автор: Hakim El Hattab;
Написано на: HTML, CSS (SCSS), JS;
#31 Резиновые переключатели
Squishy Toggle Buttons by Justin Windle on CodePen.
Автор: Justin Windle;
Написано на: HTML, CSS (Sass);
#32 Эффект при наведении на кнопку с box-shadow
Button hover effects with box-shadow by Giana on CodePen.
Написано на: HTML, CSS (SCSS);
#33 Кнопка «Submit» (Anime.js)
Submit Button (Anime.js) by Andrew Millen on CodePen.
Автор: Andrew Millen;
Написано на: HTML, CSS (SCSS), JS (jQuery & anime.js);
#34 Анимация CSS кнопки
CSS Button Animation by Sasha on CodePen.
Написано на: HTML (Pug), CSS (SCSS), JS;
#35 CSS кнопка в виде пуговицы на пледе
CSS Button on Plaid by Marcus Connor on CodePen.
Автор: Marcus Connor;
Написано на: HTML, CSS;
#36 CSS кнопка тонет в пузырьках
CSS button with bubbles by Giana on CodePen.
Написано на: HTML, CSS (SCSS);
#37 jQuery + 3D кнопка
jQuery +3D css button by Carlos G Notario on CodePen.
Автор: Carlos G Notario;
Написано на: HTML, CSS, JS (jQuery);
#38 Кнопка-переключатель на чистом CSS
Pure CSS button switch by Kitty Giraudel on CodePen.
Автор: Kitty Giraudel;
Написано на: HTML, CSS (SCSS);
#39 Коллекция креативных кнопок с эффектом при наведении
Creative Button Hover Collection by Yasin Softaoğlu on CodePen.
Автор: Yasin Softaoğlu;
Написано на: HTML, CSS;
#40 Анимации кнопок
CSS Button Animations by Alex Loomer on CodePen.
Автор: Alex Loomer;
Написано на: HTML, CSS;
#41 Кнопка с эффектом сияния и свечения
CSS Button with Hover Effect by Kniw Studio on CodePen.
Автор: Kniw Studio;
Написано на: HTML, CSS;
#42 Изящная кнопка
Button Practice by Ivan Villa on CodePen.
Автор: Ivan Villa;
Написано на: HTML, CSS (SCSS);
#43 Шесть анимаций наведения на кнопки
Six Pure CSS Button Hover Animations by Christian on CodePen.
Написано на: HTML, CSS;
#44 3D Кнопка
3D CSS BUTTON by SULEMANS CODES on CodePen.
Автор: SULEMANS CODES;
Написано на: HTML, CSS, JS;
#45 Ретро кнопка в стиле 70-х
70s CSS Button by Jordan Halvorsen on CodePen.
Автор: Jordan Halvorsen;
Написано на: HTML, CSS;
#46 100 дневная кнопка N° 045
100 days css Button N° 045 by Vitor Siqueira on CodePen.
Автор: Vitor Siqueira;
Написано на: HTML, CSS;
#47 Кнопка с еще одним эффектом наведения
Button Hover by Katherine Kato on CodePen.
Автор: Katherine Kato;
Написано на: HTML, CSS (SCSS);
#48 Анимация кнопки загрузки
Download Button Animation by Aaron Iker on CodePen.
Автор: Aaron Iker;
Написано на: HTML, CSS (SCSS), JS (gsap);
#49 Жидкая кнопка
Liquid button by Waaark on CodePen.
Написано на: HTML, CSS, JS (jQuery);
#50 Крутые кнопки
Awesome Buttons by Astitva2009 on CodePen.
Написано на: HTML, CSS;
#51 Кнопка с крутым эффектом наведения
Awesome Button Hover Effect by Devang Bajpai on CodePen.
Автор: Devang Bajpai;
Написано на: HTML, CSS;
#52 Кнопка со слайдерной анимацией наведения
Button Animated | Button hover with slide animation Pure css by Ajeet Kumar on CodePen.
Автор: Ajeet Kumar;
Написано на: HTML, CSS;
#53 Кнопка с анимацией Запрос/Успех/Ошибка
CSS Button Pending / Success / Fail Animation by Felix M. on CodePen.
Написано на: HTML, CSS (SCSS), JS (Babel);
#54 Кнопки с переходами
CSS Button transitions by Robin Treur on CodePen.
Автор: Robin Treur;
Написано на: HTML, CSS (SCSS);
#55 Неоновые кнопки
Untitled by Np|Nihad Pasa on CodePen.
Автор: Np|Nihad Pasa;
Написано на: HTML, CSS;
#56 Кнопки с разной анимацией наведения
Pure CSS button hover animation by afa on CodePen.
Написано на: HTML, CSS (SCSS);
#57 Кнопка с эффектом наведения #03
Button Hover Effect #03 by Eslam on CodePen.
Написано на: HTML, CSS;
#58 Растягивающаяся кнопка
Css Button Hover #1 — Stretchable Button by thelaazyguy on CodePen.
Написано на: HTML, CSS;
#59 Эффектная кнопка
Supah Awesome CSS Button by Kyle Lavery on CodePen.
Автор: Kyle Lavery;
Написано на: HTML, CSS (SCSS);
#60 Кнопки с разным заполнением
Pure CSS Button fill effects by Pieter Biesemans on CodePen.
Автор: Pieter Biesemans;
Написано на: HTML, CSS (SCSS);
Заключение
А какие кнопки понравились вам?
P.S. Все представленные здесь кнопки опубликованы на сайте codepen.io и разрабатывались другими авторами, а не нами.
Красивые кнопки для сайта: правила создания и нюансы расположения
Что такое красивые кнопки для сайта? Кто-то скажет, что они должны быть яркими и привлекать внимание. И если со второй частью этого утверждения нельзя не согласиться, то первая – это настоящее минное поле. Ведь если переборщить, то посетитель просто покинет страничку и никогда больше не вернется.
Нельзя забывать о функциях и расположении кнопок. Разместив красивую кнопку в нелогичном месте или забив дизайн бесполезными элементами, можно вызвать у пользователя отторжение. В нашей статье мы расскажем, как создать красивую кнопку для сайта и какие правила для этого существуют.
Задача кнопок для сайта
Назначение кнопок на сайте очевидно и не требует пояснений: они нужны для того, чтобы на них нажимали. Яркая, привлекательная кнопка гораздо эффективнее, чем малозаметная тусклая текстовая ссылка. Конечно, мера нужна во всём: страница, переполненная кнопками разных цветов, да ещё и анимированными, просто пугает пользователя. Не понимая, как ориентироваться в этом интерфейсе, он закроет ресурс, так и не совершив ни одного целевого действия.
Поэтому такой элемент интерфейса, как кнопка, должен расходоваться экономно: в видимой области экрана допускается не более двух кнопок. Действия, за которые они отвечают, должны быть ясны пользователю с первого взгляда.
Кнопки для сайта делятся на две разновидности, и каждая верстается своим HTML-тегом:
- Кнопка-ссылка, создаваемая при помощи тега . Эта красивая кнопка на сайте привлекает внимание к объекту, мотивирует перейти на нужную страницу.
- Кнопка-действие. Чтобы добавить на сайт кнопку этого типа, можно использовать тег или (обычно выбирают первый, его легче настраивать). Это кнопка, отвечающая за конкретное действие: отправку формы, открытие модального окошка, скачивание файла и т. п.
Внешне они могут совершенно не отличаться (если настройки CSS одинаковые), но между ними есть принципиальная техническая разница: только у ссылочного тега имеется атрибут href – то, куда нужно перейти по ссылке. Если забыть прописать href, то вид курсора не будет при наведении меняться на pointer.
Преимущества красивой кнопки перед ссылкой
На большинстве сайтов количество текстовых линков сильно превышает количество кнопок. Кнопки – это графические элементы, создание которых требует некоторых усилий, ссылка же прописывается за секунды. А задачи у ссылок и кнопок почти идентичны. Поэтому важно понимать, когда уместна кнопка, а когда – обычная ссылка.
«Мы обязаны делать клиентов довольными
любыми доступными способами!»
Алексей Молчанов,
основатель международной IT-компании Envybox
Текущая ситуация в стране и мире с каждым днем набирает все больше и больше оборотов.
Сегодня каждый предприниматель задается вопросом: “А что же сейчас будет с моим бизнесом?”
Если вы поддадитесь всеобщей панике и “заморозите” деятельность компании, то ни к чему хорошему это не приведет. Если вы видите, что кризис неизбежен и доход компании уже начинает сокращаться — не приостанавливайте свою деятельность. Ни в коем случае не сокращайте расходы на рекламу и не прекращайте продвижение (если вас, конечно, не закрыли из-за Постановления правительства).
Направляйте максимум усилий и внимания на продвижение своей компании и увеличение потока новых клиентов.
Для того, чтобы у вас было понимание, как следует себя вести во время кризиса — поделюсь с вами полезными инструментами, которые помогли нам не только преодолеть кризис, но и выйти из него победителями.
Ниже вы можете скачать чек-лист из простых и доступных для любой компании инструментов привлечения стабильного потока новых клиентов или возвращения существующих. А также в качестве бонуса получить бесплатное использование наших сервисов для увеличения заявок с сайта в течение 7 дней и 30% скидку на их подключение. Желаем вам удачи, новых клиентов и больших продаж!
СКАЧАТЬ ЧЕК-ЛИСТ
+ БОНУС
Перебор с кнопками не только визуально перегружает страницу и рассеивает внимание пользователя, но и замедляет загрузку. Призывов к действию не должно быть слишком много! Поэтому кнопка нужна лишь там, где вам необходимо заставить пользователя совершить конверсионное действие: оплатить заказ, подписаться, скачать файл, зарегистрироваться и т. д. Во всех прочих случаях достаточно ссылок.
По каким критериям отделять важные действия от неважных? Просто задавайте вопрос, повлияет ли ожидаемое действие на результативность сайта и бизнеса в целом.
Важные действия, как правило, связаны для юзера с необходимостью приложить усилия: завести учётную запись на портале, заполнить форму, написать комментарий, купить товар. Для менее важных действий и усилий требуется меньше (например, для перемещения между страницами и пассивного чтения материалов).
9 правил использования красивых кнопок для сайта
1. Размещать кнопки в удобных и привычных для пользователя местах.
Имейте в виду, что эффективность сайта зависит не только от местоположения, но и от порядка следования кнопок, особенно если это кнопки парные («вперёд» и «назад», например). Визуально подчеркните целевое или самое основное действие пользователя.
2. Кнопки на сайте красивы и соответствуют контексту.
Кнопки не должны выбиваться из общего дизайна сайта и фирменного стиля бренда! Выбирайте цветовую гамму и стилистику осознанно.
Так, если ваш интерфейс построен на принципах flat design, не добавляйте в него «стеклянных» объёмных кнопок в стиле Apple. Обыгрывайте в дизайне особенности логотипа, подбирайте правильные формы, цвета, типографику.
3. Второстепенное должно быть менее заметно.
Детали меню, контроллеры, бегунки и прочие служебные элементы должны оставаться на втором плане, не бросаясь в глаза. Их можно оформлять в едином стиле (например, углы скруглять по одному радиусу), но цвет или градиент заливок, вид границ, тени и прочее могут отличаться.
4. Осторожнее с размытыми тенями.
Стилизуя для сайта красивые кнопки с помощью CSS, веб-дизайнеры придерживаются так называемого закона теней: тень всегда смотрится лучше, когда более светлый элемент лежит на более тёмном фоне. Если ситуация обратная, будьте аккуратны с тенями, чтобы не получилось грязное бесформенное пятно.
5. Единый стиль для элементов второго, третьего, четвертого порядка.
Разрабатывая интерфейс с обширным набором функций, следует придерживаться единого визуального языка. Это сделает сайт не только красивым, но и понятным, иерархичным.
Кстати, размеры кнопок, отступов, шрифта и глубины тиснения тоже должны уменьшаться по мере падения важности элемента – чтобы снизить его визуальный вес.
6. Будьте аккуратны с кнопками-призраками.
Это кнопки, состоящие только из обводки и границы одного цвета (фон при этом прозрачен). Они могут исчезнуть, и это не фигура речи, а факт, подтверждённый исследованиями в области юзабилити: юзеры их не всегда замечают, а иногда не могут прочесть надпись на них. Вписывать их в интерфейс сложнее, чем обычные html-кнопки для сайта (с красивой непрозрачной заливкой).
Дизайнеры выходят из положения, делая заливку белой – это проще всего. Однако яркое фото или заливка родительского элемента могут повлиять на кнопку так, что она совсем потеряется из виду. Кроме того, призрачная кнопка кажется менее весомой и значимой по сравнению с обычной.
7. Не подписывайте кнопку «ОК» или подобным образом.
Простые кнопки типа «Да», «Нет», «Cancel», «OK» и другие, ежедневно нажимаемые нами в интерфейсе ПК, не подходят для дизайна сайтов, поскольку никак не описывают действие, совершаемое пользователем. Чтобы проще было отслеживать метрики, связывайте СТА c конверсионным действием и подписью кнопки.
8. Оптимальное место для целевой кнопки – нижний правый угол страницы.
Это можно доказать с помощью диаграммы Гутенберга. Визуально страница состоит из четырёх сегментов, а стрелки указывают на перемещение взгляда юзера. Больше всего люди уделяют внимание левому верхнему и правому нижнему углам страницы, а вот левый нижний квадрат проскакивают, почти не останавливаясь. Отсюда – рекомендации по размещению конверсионных кнопок.
9. В модальных окнах целевую кнопку лучше ставить в правую часть.
«Заказать», «Оплатить», «Отправить» и прочие кнопки сработают лучше, будучи помещенными в правой части окна.
Кнопки, расположенные слева, привлекают внимание раньше, но, поскольку пользователь ещё не просмотрел всё до конца, он не нажимает на кнопку. А когда он ознакомился со всеми опциями, его взгляд уже подошёл к кнопке альтернативного выбора, и проще кликнуть на неё, чем возвращаться и искать первую.
Поэтому оптимален следующий порядок: слева – кнопка второстепенной опции, справа в конце – конверсионная.
Создание красивой кнопки для сайта
Для кнопок, которые не просто перебрасывают пользователя на другую страницу, а что-либо делают (отправляют данные из формы, очищают заполненные поля, открывают попап, загружают файл и т. п.), лучше применять тег :
У него есть необязательный атрибут type – тип кнопки, принимающий значения трёх типов:
type: button | submit | reset
В принципе, его можно не прописывать вообще. Но если это кнопка в форме, то по умолчанию браузер интерпретирует любой как и по клику отправляет данные из формы.
Есть мнение, что этот тег должен находиться непременно внутри тега . Это не совсем так. Если вы хотите разместить на сайте красивую кнопку за пределами формы, данными из которой она оперирует, просто добавьте ей атрибут form с id вашей формы, и всё будет работать корректно.
Есть и другие атрибуты у :
- autofocus: установка фокуса на кнопку по умолчанию, как только загрузится страница;
- disabled: блокировка кнопки (на неё нельзя нажать, она ничего не делает);
- formaction (только в сочетании с типом submit): здесь прописывается URL обработчика данных из формы;
- formenctype (тоже только для submit): описывает тип данных, которые будут пересылаться в обработчик – application/x-www-form-urlencoded, multipart/form-data или text/plain;
- formmethod (только для submit): это HTTP-метод отправки данных. Принимает значения get/post;
- formtarget (только для submit): окно или фрейм, где будет выведен результат (_self, _blank, _top, _parent либо name фрейма);
- name: имя (необходимо для форм с несколькими кнопками, позволяет отслеживать, которая из них нажата);
- value: значение (по сути, этот атрибут аналогичен name).
Теперь давайте попробует создать для сайта две красивые кнопки разного типа: ссылочную с тегом , ведущую на страницу регистрации, и целевую с тегом , открывающую модальное окно. Оформим их в одном стиле.
Если вам нужна иконка внутри кнопки, реализуйте её вывод с помощью иконочного шрифта FontAwesome. Для самой кнопки выберите гарнитуру Roboto – она отлично подходит и для латинских, и для кириллических текстов.
Большая коллекция кнопки CSS / HTML
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на CSS и HTML с валидным и качественным кодом.
Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.
Как сделать кнопку на CSS
Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».
Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
Когда применяется тег button?
- тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
- если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML