3D кнопки на CSS


Содержание

Красивые 3D кнопки с помощью CSS

На любом сайте можно обнаружить переходную ссылку в виде веб-кнопке оформленную по дизайну ресурса. Это очень удобно и, кроме того, еще и красиво, что обязательно привлечет внимание пользователя. В сегодняшнем мини-уроке рассмотрим на примере создания кнопке в 3D стиле. Она создаёт вид объемного элемента, а при нажатии демонстрирует реалистичный эффект вдавливания.

HTML

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

CSS

Следующий шаг – это стилизация объемных кнопок. В принципе ничего сложного нет, но есть некоторые моменты, на которые я бы обратил внимание. В демо-просмотре 3Д-эффект, нижняя часть кнопке, сделана силами тега border-botton с цветом чуть темнее фона. Это не очень удобно, если необходимо менять цвета, то придется каждый раз подбирать два цвета с разными оттенками. Проще добавить внутреннюю тень с прозрачностью и не забыть про padding (внутренний отступ). Так как тень займет место, к примеру, в 4px, и вид кнопке уже будет не такой.

Демо с тенью вместо border’a

Labdes

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

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

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

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

CSS3 градиент

По началу синтаксис для CSS3 градиентов может быть немного пугающим, поэтому для этого урока мы будем использовать генератор кода, чтобы сделать градиент. Воспользуйтесь этим генератором градиента в CSS3 (любо любым другим, который вы найдете через поисковик) и установите два цвета вначале на 0 и потом на 100 используя слайдер внизу.

Затем используйте эти цвета для создания градиента: #609bcb и #4a85b5. Самая распространенная ошибка молодых дизайнеров при работе с градиентами, старание сделать их слишком заметными. Мы же просто хотим, добавить тонкий округлый эффект, не более того.

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

Далее мы должны добавить a:hover стиль. Я хотел бы добавить слегка яркости для кнопки при наведении. Чтобы сделать это, сделаем еще один градиент, где обе точки будут немного ярче, чем вначале. Затем добавим код к псевдо-классу .button:hover.

Острые края кнопки выглядит немного опасными. Давайте закруглим их с помощью свойства border-radius.

Эти три строчки, позволят нам сделать закругленные углы с радиусом 5px. Не делайте угловой радиус слишком большой иначе он начнет выглядеть очень странно. Опять же, мы добиваемся тонких деталей. Обратите внимание, что у нас есть префиксы для браузеров -WebKit- и -moz-. Это поможет нам охватить браузеры более ранних версий, а простое свойство border-radius мы поставим в конце.

Введение в Shadows

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

Напишем другим способом, чтобы понять что здесь к чему:

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

Теперь, используя свойство box shadows, которое использует тот же синтаксис, я хочу добавить еще несколько деталей. Сначала мы добавим 3D эффект.

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

И так вторая тень имеет x-offset 0, а y offset 3px, и blur 15px. Цвет RGBa позволяет нам использовать прозрачность в нашей тени. Это очень важно что бы она выглядела естественно.

И даже больше теней

Вы можете не правильно подумать об использовании box shadows теней для создания подсветки, но они для этого эффекта работают очень хорошо. Box-shadow принимает значение inset, которая делает тень внутрь элемента, а не наружу. inset тень выглядит следующим образом:

Я использую белый цвет с частичной прозрачностью, чтобы создать хорошую подсветку вдоль верхнего края кнопки. Сделаем еще Shadow/Highlight которая задаст четкие контуры по всему периметру. Обратите внимание, что здесь у нас присутствует размытость:

Для всех этих теней, чтобы они работли, они должны быть в одном правиле вроде этого:

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

Наш код до этой точки выглядит следующим образом:

Нажмите меня

Это обычный вид кнопки, но что происходит при нажатии на нее? На данный момент ничего. Похоже, что надо как то отразить нажатие на кнопке, поэтому давайте создадим этот эффект.

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

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

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

Перемещение кнопки

Нам также нужно переместить кнопку немного вниз на то же количество пикселов, на какое мы сократили наши тени (в данном случае 4px). В противном случае, это будет выглядеть так, как будто тени стали просто короче, а не так как будто нажали кнопку вниз. Для этого мы будем использовать свойство transform.


Это правило будет перемещать кнопку вниз на 4px при нажатии. Если вы хотите узнать больше о transforms, начните с этой статьи 24Ways.

Добавление анимации

Теперь, если вы нажмете кнопку она будет нажиматься вниз, но это будет происходить мгновенно. Мы можем легко сделать плавную анимацию между этими двумя позициями используя CSS3 переходы (transitions). Вернемся на наш основной стиль кнопки и добавим следующее:

Это будет автоматически анимировать обе наши тени и перемещение (transform). Это “все” ключевые слова. 0,2 сек означает, что я хочу, чтобы вся анимация длилась 0,2 секунды. И, наконец, ease-in-out относится к времени анимации.

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

Больше 3D

Мы можем сделать наш пример еще более интересным, воспользовавшись 3D-transforms. Для этого нам в первую очередь необходимо добавить перспективу на родительский элемент, в данном случае body атрибут:

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

Теперь для .button добавим следующее:

Теперь кнопки действительно выглядит трехмерным. Но мы должны также добавить rotateX (20deg) для:active состояние кнопки. Окончательный код должен выглядеть следующим образом:

Ура, вот мы и сделали красивую 3D кнопку на CSS3!

Кнопки | CSS

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

Цукерберг рекомендует:  Бесплатка 40 “летних” иконок

Когда использовать тег button?

  • 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=’#’ >Talia Screen Orizzontale 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 не понимаю.=(

3D кнопки на CSS

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

3D кнопки на CSS

В данном уроке мы создадим 3D кнопки с применение только CSS команд.

Разметка HTML

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

CSS для создания иконок

Для создания иконок будем использовать специальный шрифт:

CSS для кнопок

Кнопки выравниваются горизонтально с помощью свойства inline-block для пунктов списка. Мы сдвигаем их плотно с помощью отрицательного значения для поля.

Объемность для кнопок получается с помощью небольшого градиента и формирования выступа парой свойств box-shadow s (одного для обычной тени и другого — для внутренней). Ширина и высота кнопок одинаковая для создания квадрата, который превращается в круг с помощью свойства border-radius . Значение свойства line-height равно высоте, а text-align установлено на выравнивание по центру, поэтому иконки центрированы горизонтально и вертикально.

Можно придать кнопке плоский вид для состояния :hover, чтобы имитировать нажатие.

Теперь наши кнопки будут выглядеть так:

Отлично, но нужно двигаться дальше.

Теперь воспользуемся псевдо-элементами для формирования дополнительных эффектов. Для формирования горизонтальной выгравированной линии задействуем псевдо-селектор :before для пунктов списка. С помощью свойства z-index можно поместить его ниже всех остальных элементов. Двойная рамка создает линии отличный вдавленный вид. А отрицательное значение полей (установленное ранее для пунктов списка) позволяет сделать линию сплошной. Также воспользуемся преимуществом абсолютного позиционирования для центрирования линии.

Для придания дополнительного объема создадим обводку вокруг каждой кнопки. Также воспользуемся псевдо-элементом.

Размер обводки (немного больше самой кнопки) получается с помощью абсолютного позиционирования псевдо-элемента позади кнопки и растягивания его с помощью отрицательных значений положения (top/bottom/left/right). 3D вид получается с помощью свойства border и внутренней тени box-shadow .

Поддержка в браузерах

Данные кнопки используют CSS3 и несколько псевдо-элементов из CSS 2.1. Последние версии браузеров Safari, Chrome, Opera, или Firefox выводят их без искажений. IE 8 не поддерживает CSS3, и внешний вид несколько изменяется:

CSS Buttons

Узнайте, как стиль кнопок с помощью CSS.

Цукерберг рекомендует:  Отключение прокрутки на Google картах

Основные стили кнопок

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

Пример

Цвета кнопок

Используйте свойство background-color для изменения цвета фона кнопки:

Пример

Размеры кнопок

Используйте свойство font-size для изменения размера шрифта кнопки:

Пример

Используйте свойство padding для изменения заполнения кнопки:


10px 24px 12px 28px 14px 40px 32px 16px 16px

Пример

Закругленные кнопки

Используйте свойство border-radius для добавления скругленных углов к кнопке:

Пример

Цветные границы кнопок

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

Пример

Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.

Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:

Пример

.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>

.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.

Кнопки теней

Use the box-shadow property to add shadows to a button:

Пример

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Отключенные кнопки

Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).

Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:

Пример

Ширина кнопки

По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:

Пример

Группы кнопок

Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:

Пример

Группа кнопок на границе

Используйте свойство border для создания группы кнопок с рамками:

Пример

Вертикальная группа кнопок

Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок:

3D кнопки на CSS

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

CSS для создания иконок

Для создания иконок будем использовать специальный шрифт:

Кнопки выравниваются горизонтально с помощью свойства inline-block для пунктов списка. Мы сдвигаем их плотно с помощью отрицательного значения для поля.


Объемность для кнопок получается с помощью небольшого градиента и формирования выступа парой свойств box-shadows (одного для обычной тени и другого — для внутренней). Ширина и высота кнопок одинаковая для создания квадрата, который превращается в круг с помощью свойства border-radius. Значение свойства line-height равно высоте, а text-align установлено на выравнивание по центру, поэтому иконки центрированы горизонтально и вертикально.

Можно придать кнопке плоский вид для состояния :hover, чтобы имитировать нажатие.

Теперь наши кнопки будут выглядеть так:

Отлично, но нужно двигаться дальше.

Теперь воспользуемся псевдо-элементами для формирования дополнительных эффектов. Для формирования горизонтальной выгравированной линии задействуем псевдо-селектор :before для пунктов списка. С помощью свойства z-index можно поместить его ниже всех остальных элементов. Двойная рамка создает линии отличный вдавленный вид. А отрицательное значение полей (установленное ранее для пунктов списка) позволяет сделать линию сплошной. Также воспользуемся преимуществом абсолютного позиционирования для центрирования линии.

Для придания дополнительного объема создадим обводку вокруг каждой кнопки. Также воспользуемся псевдо-элементом.

Размер обводки (немного больше самой кнопки) получается с помощью абсолютного позиционирования псевдо-элемента позади кнопки и растягивания его с помощью отрицательных значений положения (top/bottom/left/right). 3D вид получается с помощью свойства border и внутренней тени box-shadow.

Поддержка в браузерах

Данные кнопки используют CSS3 и несколько псевдо-элементов из CSS 2.1. Последние версии браузеров Safari, Chrome, Opera, или Firefox выводят их без искажений. IE 8 не поддерживает CSS3, и внешний вид несколько изменяется:

Dobrovoi Master

Привлекательные 3D кнопки с помощью CSS3

Благодаря новым функциям CSS3 стало возможным отказаться от использования изображений при оформлении элементов интерфейса сайта, на смену картинкам приходит чистый код CSS. Так например, всё чаще поступают при формировании кнопок, используемых на сайте.
Однажды я уже рассказывал, как пользуясь исключительно средствами CSS3, можно «нарисовать» красивую кнопку в стиле 3d.
Сегодня, предлагаю очередной набор правил CSS3, для формирования привлекательных кнопок в стиле 3D, без использования дополнительных фоновых изображений. Весь код CSS разбит так, чтобы стили можно было использовать, как в общем массиве, так и для каждой кнопки отдельно.

Html-код для всех кнопок будет выглядеть так:

Кнопка 1 Кнопка 2 Кнопка 3 Кнопка 4

Кнопка 1 Кнопка 2 Кнопка 3 Кнопка 4

Кнопка 1 Кнопка 2 Кнопка 3 Кнопка 4

Для кнопок большого размера:

Кнопка 1 Кнопка 2 Кнопка 3 Кнопка 4

Как видите в конструкции кнопок задействован тег с прописанными определёнными классами, определяющими непосредственно в css все необходимые параметры кнопок, т.е. базовые стили: btn , цвет кнопки: btn-hot btn-sunny btn-sunny и btn-sky соответственно, а так же размер: btn-xs для самых маленьких кнопок, btn-sm выводит кнопки побольше, стандартным кнопкам соответствует класс btn-md , и чтобы вывести совсем большие кнопки, достаточно добавить btn-lg .
Класс btn общий для всех кнопок и отвечает за базовые стили, вам остаётся выбрать нужный вам цвет и размер кнопки, и в теге прописать соответствующие классы.

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

На отдельной странице, вы ещё раз можете посмотреть живой пример всех вариантов 3d-кнопки, если понравятся и вы их захотите использовать, то просто скачайте исходники в архиве с моего Яндекс.Диска:

Корректно кнопки отображаются во всех современных браузерах Opera, Firefox, Chrome, Safari и Internet Explorer 9+, в IE8 отсутствуют закругления углов, но это не особо критично. Исходя из этого можно сделать вывод, что такие 3D-кнопки, сформированные с помощью CSS3, можно и даже нужно использовать на своих веб-проектах.

Набор правил и свойств CSS основан на стилях отдельных элементов популярного css-фреймворка Twitter Bootstrap и могут использованы без подключения этой библиотеки инструментов для создания сайтов.

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Красивые 3D-кнопки с помощью CSS3

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

Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.

С помощью CSS3 я «нарисовал» практически копии этих кнопок, кодом которых и поделюсь в данной статье.

HTML-код кнопки будет таким:

Можно было бы использовать и тег , но есть 2 причины, по которым в данном случае лучше будет задействовать тег :

  1. В Опере на input’е не работает свойство text-shadow ;
  2. В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.

Примеры

На отдельной странице я подготовил все 10 вариантов 3D-кнопки. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.

Также пример такой кнопки вы можете наблюдать в форме добавления комментария на данном блоге.

Особенности

  • Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.
  • Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.

  • Для создания градиентов я воспользовался удобным сервисом Ultimate CSS Gradient Generator.
  • Если сравнивать место, занимаемое на сервере, между кнопкой, созданной в виде изображения, и кнопкой, созданной на чистом CSS-коде, то разница получается несущественная — плюс-минус 1 Кб. Однако при этом кнопка на CSS3 позволяет снизить количество запросов к серверу на 1, что, несомненно, является плюсом.

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

20 уроков по созданию кнопок на чистом css

27 июня 2012 | Опубликовано в css | 4 Комментариев »

Предлагаем вашему вниманию подборку уроков по созданию кнопок на чистом css. Как ни крути, без кнопок на сайте никак не обойтись, а эти уроки могут натолкнуть вас на новые идеи и помочь лучше освоить css3. Также здесь вы найдёте несколько готовых решений. Надеемся, они вам пригодятся.

1. Кроссбраузерные CSS-кнопки с градиентом

2. Симпатичные CSS3-кнопки (фреймворк)

3. Социальные кнопки, которые реагируют на нажатие

4. 3D-кнопки

5.Тёмная навигация при помощи CSS3

6.CSS3-кнопка, которая реагирует на событие

7.Кнопки с социальными закладками

8.Радиоактивные кнопки

9. Анимированная CSS3-кнопка с пузырьками

10.Делаем кнопку на чистом CSS

11.Милые кнопки при помощи CSS3

12. Создаём анимированную кнопку, которая реагирует на событие

13.Css-кнопки при помощи псевдоэлементов

14. Минималистичные круглые 3D-кнопки при помощи CSS

15. Делаем кнопки как на YouTube

16. Стильная кнопка при помощи CSS3

17. 3D-кнопка

18.Большая кликабельная CSS-кнопка (готовое решение)

19. Анимированная круглая кнопка (готовое решение)

20.Красивые кнопки реагирующие на нажатие (готовое решение)

Автор подборки — Дежурка

Возможно, вас также заинтересуют статьи:

  • Опубликовано в css, июня 27, 2012
  • Метки: кнопки, урок css3, уроки css

Комментарии

  1. Azamat
    27 июня 2012 в 16:50

Артём
28 июня 2012 в 5:34

Спасибо, многое может пригодиться в будущих проектах.

P.S. пожалуйста, исправьте «радиоактивныЙ» на «радиоактивныЕ»

P.P.S. и нормальный скрин тоже не помешал бы

Денис
28 июня 2012 в 23:45

Замечание по первому уроку: далеко не кроссбраузерный вариант. Проверьте в Opera 12. За IE6 молчу. В остальных версиях IE градиенты есть, но скругления нет. В общем слово «кроссбраузерность» тут уже не уместна. Позже попробую разобраться, почему в Опере не работает. Правда код в том примере хуже не куда — всё в одну строку.

А в остальном, красиво. Спасибо вам большое!

Люблю ваш сайт, частенько черпаю отсюда веб-элементы и вдохновение для дизайна :)

lkjhnkjhgb
27 сентября 2013 в 18:39

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих