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

CSS для начинающих. CSS кнопки это просто // HTML and CSS

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

Для этого лучше всего нам подойдет инструмент “Rounded Rectangle Tool” в Photoshop, с него и начнем – нарисуем нечто вроде:

Изменяя параметр Radius вы сможете задать желаемое загругление кнопок ( в примере для наглядности контент полностью прозрачный (“Fill Opacity” => 0%)):

Ширина объекта в данном примере 320px – т.е. я предполагаю, что кнопок большего размера не будет.

Границу выводим с помощью “Stroke” (из “Blending Options”), тип – градиент – от #000000 до #676767:

Теперь не мешало бы и залить кнопочку градиентом (сверху указан параметр opacity, внизу цвет; инструмент “Gradient Overlay” из “Blending Options”):

Результат с залитой границей:

Если мы сделаем цветной фон:

Ну вот – кнопочка и готова, приступим к следующему шагу…

Простая CSS кнопка

Самый простой вариант – у нас все кнопки одного размера и одного/двух цветов, соответственно готовим небольшой “спрайт” на все случаи жизни (простым копированием слоя с кнопкой):

Теперь нам остается лишь слегка подправить CSS для таких кнопок:

.button < cursor:pointer; display:block; height:70px; width:320px; line-height:70px; text-align:center; background-image:url('images/buttons.png'); background-repeat:no-repeat; >.button.green < background-position:0 0 >/* зеленая кнопка */ .button.green:hover < background-position:0 -350px >/* активная зеленая кнопка */ /* и т.д. */

Сам HTML код элементарен:

&lt;a href=&quot;#&quot; title=&quot;Label&quot; green&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; white&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; black&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; orange&quot;&gt;Label&lt;/a&gt; &lt;a href=&quot;#&quot; title=&quot;Label&quot; red&quot;&gt;Label&lt;/a&gt;

Резиновая CSS кнопка

Теперь усложним задачу – мы не имеем представления какого цвета будут кнопки, и какого размера, мы лишь предполагаем, что кнопки не будут больше 320px в ширину.

Строим DOM

Ну и сам HTML код:

&lt;ul &lt;li href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li green&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li white&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li black&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li orange&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;li red&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;Label&quot;&gt;Label&lt;em&gt;&lt;/em&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;

Примечание: можно использовать практически любые другие HTML теги, это дело вкуса, так что таким же образом вы можете изменить и элементы формы. Для упрощения HTML’а можно воспользоваться JavaScript’ом. Приведу пример:

&lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function()< $('form :button, form :submit').each(function()< var className = $(this).attr('class'); $(this).wrap('&lt;div '+className+'&quot;&gt;&lt;/div&gt;'); $(this).after('&lt;em&gt;&lt;/em&gt;'); >); >); &lt;/script&gt; &lt;form onsubmit=&quot;return false;&quot;&gt; &lt;input type=&quot;button&quot; title=&quot;Button&quot; value=&quot;Button&quot;/&gt; &lt;input type=&quot;submit&quot; title=&quot;Submit&quot; value=&quot;Submit&quot;/&gt; &lt;/form&gt;

Пишем CSS

Читаем комментарии по коду:

.button < /* у нас кнопка с закруглением - значит нам необходимо у DOM элемента так же скруглить углы */ border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius: 10px; /* внутренний элемент <a> должен быть смещен относительно <li> на 20px - освобождаем место для <em> */ padding-right:20px; /* данные элемент будет relative - т.е. все элементы внутри него с абсолютным позиционированием будут плясать от него */ position:relative; >.button a, .button em < /* ссылке и элементу em задаем одинаковое фоновое изображение */ background-image:url('css/images/button.png'); background-repeat:no-repeat; >.button a < /* ссылку делаем блочным элементом задаем высоту элемента, а так же свойство line-height - с его помощью мы выравниваем текст по вертикали */ display:block; height:52px; line-height:52px; outline:none; color:#333; font-size:18px; text-indent:20px; text-decoration:none; text-align:center; text-shadow: #333 0px -1px 0px; >.button em < /* внутренний элемент так же будет блочным с размером 52х20, с абсолютной позиционированием */ display:block; position:absolute; background-position:100% 0; width:20px; height:52px; top:0px; right:0px; >/* цвет шрифта для некоторых кнопок лучше поменять */ .button.green a, .button.black a, .button.red a < color:#fff; >/* тут указываем цвет наших кнопок */ .button.green < background-color:#009e0f >.button.green:hover < background-color:#068612 >.button.white < background-color:#f0f0f0 >.button.white:hover < background-color:#c0c0c0 >.button.black < background-color:#000 >.button.black:hover < background-color:#333 >.button.orange < background-color:#ff7800 >.button.orange:hover < background-color:#c60 >.button.red < background-color:#f00 >.button.red:hover

Наблюдаем результат

Сравним результат наших трудов в разных браузерах:

Как вы можете заметить, есть несколько проблем с данной реализацией:

полупрозрачность в IE6 не работает – можем докрутит хаки, но зачем – IE6 можно считать умершим
box-radius в IE и Opera не работает – либо отказываемся от данной фичи, либо зарисовываем свободное пространство фоновым цветом (для IE так же есть грязный хак, см.: Curved corner (border-radius) cross browser)

Кнопочки можно пощупать на демо, все сорцы доступны по следующей ссылке:

Еще ссылки по теме:

Scalable CSS Buttons Using PNG and Background
Bold CSS Buttons
Make fancy buttons using CSS sliding doors technique
CSS Sliding Door using only 1 image
CSS Oval buttons

Информация

jQuery для начинающих
jQuery для всех
PHP для всех

Проекты

Charts Builder
Photo Blog
Syntax Highlighter

Блогролл

NIX Solutions Ltd.
Мысли с самого низа
Прохождение игр

Как сделать кнопку с обрезаными углами html/css

введите сюда описание изображения

Мне надо получить такие кнопки вопрос: как мне их сделать через css . спасибо на ответы.

Отслеживать
задан 28 ноя 2022 в 16:15
Igor Biyar Igor Biyar
55 7 7 бронзовых знаков
28 ноя 2022 в 16:20
не очень подходит — codepen.io/imergames/pen/bGpGGyx
28 ноя 2022 в 16:32
28 ноя 2022 в 16:36

Я думал над псевдо.элм но проблема в том что на сайте кнопки в разных блоков и будет выходить так — codepen.io/imergames/pen/bGpGGyx, так что надо будет постояно менять цвет псевдо.элм , и я подумал пожет есть более удобный способ.

28 ноя 2022 в 16:41

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

:root < --size-skew: 1rem; >.btns < margin-bottom: 1rem; padding: 1rem; box-sizing: border-box; background-color: #C1E532; display: flex; flex-wrap: wrap; gap: 1rem; >.red < background-color: #f00; >.btn < cursor: pointer; font-weight: 700; font-size: 1rem; text-transform: uppercase; padding: 1rem 3rem; display: inline-flex; align-items: center; justify-content: center; border: none; background-color: #272727; color: #fff; clip-path: polygon(var(--size-skew) 0, 100% 0, 100% calc(100% - var(--size-skew)), calc(100% - var(--size-skew)) 100%, 0 100%, 0 var(--size-skew)); transition: background-color 0.3s ease; box-sizing: border-box; >.btn::before < content: ""; position: absolute; inset: 0; background-color: #272727; clip-path: polygon(0 var(--size-skew), var(--size-skew) 0, 100% 0, 100% calc(100% - var(--size-skew)), calc(100% - var(--size-skew)) 100%, 0 100%, 0 var(--size-skew), 2px calc(var(--size-skew) + 0.83px), 2px calc(100% - 2px), calc(100% - var(--size-skew) - 0.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - var(--size-skew) - 0.83px), calc(100% - 2px) 2px, calc(var(--size-skew) + 0.83px) 2px, 2px calc(var(--size-skew) + 0.83px)); pointer-events: none; >.btn:hover, .btn:focus, .btn:active < background-color: #000; >.btn-outline < color: #272727; position: relative; background-color: transparent; >.btn-outline:hover, .btn-outline:focus, .btn-outline:active

Отслеживать
ответ дан 28 ноя 2022 в 17:05
27.5k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

html
css
button

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.