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

Как сделать кнопку в виде прямоугольника со срезанным углом на CSS

Как можно сделать кнопку такой формы на чистом CSS?

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 26 ноя 2020 в 15:42
13 3 3 бронзовых знака

Опишите текстом, что значит «такую», так как вопросы-картинки плохо индексируются в поисковых системах

26 ноя 2020 в 16:48

3 ответа 3

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

Вариант с прозрачностью и на линейных градиентах:

/* Only for demo */ body button < height: 45px; width: 160px; border: none; background-color: transparent; background-image: linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(to right bottom, transparent calc(50% - 2px), #1c9cf2 calc(50% - 1px), #1c9cf2 50%, transparent calc(50% + 1px)), linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(#1c9cf2, #1c9cf2); background-size: 100% 2px, 2px 75%, 6% 25%, 94% 2px, 2px 100%; background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 0; background-repeat: no-repeat; filter: drop-shadow(0 1px 1px #000a); transition: .3s ease; >button:hover

BuTToN

Отслеживать
ответ дан 26 ноя 2020 в 16:27
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

body < background: #cda; >.button < width: 150px; height: 50px; position: relative; border: 2px solid #007bff; clip-path: polygon(0 0, 100% 0, 100% 25px, calc(100% - 25px) 100%, 0 100%) >.button:before

body < background: #cda; >.button

Отслеживать
ответ дан 26 ноя 2020 в 16:08
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков

.button < position: relative; width: 150px; height: 50px; border: 2px solid #007bff; >.button:before, .button:after < content: ""; width: 0px; height: 0px; position: absolute; bottom: -2px; right: -2px; border-style: solid; >.button:before < border-width: 0 0 20px 20px; border-color: transparent transparent #007bff transparent; >.button:after

Отслеживать
ответ дан 26 ноя 2020 в 15:55
37.2k 4 4 золотых знака 27 27 серебряных знаков 70 70 бронзовых знаков
Если фон картинкой или не белым цветом — возникают проблемы при таком способе
26 ноя 2020 в 15:59
не спорю, но тогда можно собрать кнопку из 3 частей где самая правая часть состоит из 2х частей
26 ноя 2020 в 16:03

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

Похожие

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

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

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

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических изображений.

Создание красивой овальной кнопки без использования графических картинок.

Код HTML для овальной кнопки:

Для того, чтобы не прописывать вручную все вендорные префиксы, можно использовать скрипт prefixfree.min.js, который обработает и добавит необходимые префиксы в файлах css на стороне клиента:

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

.btn-oval < display: inline-block; width: 240px; height: 70px; box-sizing: border-box; text-align: center; color: #fff; text-decoration: none; background: linear-gradient(#89c13e, #599c02); background-color: #6fad1d; border-radius: 35px; border: 1px solid #579a00; font: bold 30px/70px Arial; box-shadow: inset 0 2px 2px #cce464, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); position: relative; text-shadow: 0 1px #45880d; outline: none; >.btn-oval:before < content: ""; position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; padding: 10px; background: #d7d7d7; z-index: -1; border-radius: 50px; box-shadow: inset 0 1px 2px #bbb; >.btn-oval:hover < background: linear-gradient(#97d444, #65ad07); box-shadow: inset 0 1px 0 #e2f498, inset 0 2px 0 #ceec87, inset 0 3px 0 #c3e67c, inset 0 5px 0 #bae475, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); >.btn-oval:active

Рабочий пример овальной кнопки на CSS (кликабельно):

Источник уже не помню, но вроде бы Dimox.

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…

Отключить кнопку отправки, если поле пустое Javascript Второй вариант для проверки поля

Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем элемент…

Как сделать красивую кнопку на CSS+HTML без изображений

Назар Токар

Помните урок Как удвоить продажи магазина при помощи одной кнопки? Там я рассказывал, как сделать крутую кнопку, а сама кнопка формировалась из собственно объекта button и слоя без фонового цвета с ободком толщиной в 1 пиксель.

Я решил упростить структуру и убрать лишний слой. Сегодня представляю небольшой урок, как сделать красивую кнопку с градиентом на CSS3 без использования графики, на одном только html.

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

input[type*='button'], input[type*='submit']

Кнопка будет выглядеть так:

…и она на 146% лучше кнопки добавления в корзину на Amazon.com, информация из достоверных источников :).

Как сделать?

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

Когда цвета выбраны, добавляем в ваш CSS такой код:

.great_btn

В html страниц в коде кнопки нужно добавить

class='great_btn'

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

Поддержка CSS3 в Internet Explorer 9+

Как вы знаете, браузер Internet Explorer в ссоре не только со здравым смыслом, но и с CSS3. Потому, чтобы всё работало в IE9, перед добавляйте строку:

Тем самым вы показываете браузеру, что параметры CSS3 нужно обрабатывать. Как ни странно, если этого не указывать, явные стили для объектов этой в версией браузера отображаются как в IE8-, то есть никак.