Как сделать линейный градиент на границе кнопки
Мои ожидания: Мой код:
.row-product-btn < display: flex; justify-content: center; >.row-product-btn-cl
Отслеживать
774 5 5 серебряных знаков 23 23 бронзовых знака
задан 18 дек 2021 в 19:19
Deluxe Redit Deluxe Redit
17 1 1 серебряный знак 3 3 бронзовых знака
правильно я понимаю, что вы имели в виду линейный градиент на границе кнопки?
18 дек 2021 в 19:27
Да, нужно как вот на фото которое прикрепил, я не сильно разбираюсь просто, учусь
18 дек 2021 в 19:28
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Без псевдоэлементов здесь, к сожалению, никак, по крайней мере, с ними легче.
Вот CSS, прочитайте про псевдоэлементы:
.row-tab-bank .row-product-block .row-product-btn .row-product-btn-cl < width: 155px; height: 47px; border: none; border-radius: 45px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; font-size: 14px; color: #fff; font-weight: bold; background: -webkit-gradient( linear, left top, right top, from(#682fbd), to(#cb4cbc)); background: linear-gradient(90deg, #682fbd 0%, #cb4cbc 100%); >.row-tab-bank .row-product-block .row-product-btn .row-product-btn-cl::before < content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 2px; border-radius: 50px; background: -webkit-gradient( linear, left top, right top, from(#242333), to(#3c3b53)); background: linear-gradient(90deg, #242333 0%, #3c3b53 100%); >span
Отслеживать
ответ дан 18 дек 2021 в 19:45
Иван Ипатов Иван Ипатов
774 5 5 серебряных знаков 23 23 бронзовых знака
Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
19 дек 2021 в 5:58
Проще паренной репы.
body < background: #111; >.row-product-btn < display: flex; justify-content: center; >.row-product-btn-cl < background: transparent; border: 0; >.row-product-btn-cl > span < width: 155px; height: 47px; background: linear-gradient(90deg, #242333 0%, #3C3B53 100%); border-radius: 50px; border: 0; border-image-slice: 1; display: inline-block; align-items: center; justify-content: space-around; font-size: 14px; line-height: 44px; color: $white; font-weight: bold; color: #fff; >.row-product-btn-cl::before
Отслеживать
ответ дан 19 дек 2021 в 3:06
7,586 1 1 золотой знак 6 6 серебряных знаков 28 28 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS3 Градиент для кнопок
Совсем недавно я рассказывал о том как добиться правильного отображения градиента CSS в современный браузерах.
Можно посчитать воплями в пустоту все мое повествование, если не рассказать о практическом применении градиент функции CSS. Отличным и незамысловатым примером может послужить создание кнопок для сайта, исключительно средствами CSS, не используя каких либо дополнительных изображений и javascript.
Размер кнопок легко регулируется путем изменения внутреннего отступа pading: и размера шрифта font-size .
Отличительной стороной этого метода является возможность его применения к любому элементу HTML, таких как div, span, p, a, button, input, и т.д.
Градиент с помощью CSS3 является «кросс-браузерым» и поддерживается большинством современных браузеров (IE, Firefox 3.6, Chrome и Safari). Еще совсем не давно в Opera, кнопки отображались с фоном сплошной заливки без градиента, выглядели наши кнопки совсем не плохо, но все же это было серьезным упущением в работе столь популярного браузера. И вот, наконец то до разработчиков Opera снизошло прозрение и в очередной версии своего детища, в новой Opera 11, суровые норвежские парни добавили новые функции, в том числе и поддержку градиента: background-image: -o-linear-gradient
Преимущества метода
- Чистый CSS: не используются изображения или Javascript.
- Кросс-браузерность, поддерживается основными браузерами (IE, Firefox 3.6, Opera, Chrome и Safari).
- Размер кнопки и закругленные углы можно регулировать, изменяя размер шрифта и отступы.
- Три состояния кнопки: нормальный, режим наведения и активный.
- Применяется к любому элементу HTML : a, input, button, span, div, p, h3, и т.д.
- Запасной вариант для браузеров не поддерживающих функцию градиента CSS, тупо выводится кнопка без градиента и тени.
Можете посмотреть демонстрационную страничку с кнопками в различных браузерах, ну а те кому это в лом, или нет такой возможности, смотрите на рисунок ниже, на нем показано, как кнопки будут отображаться в разных браузерах.
Каждая кнопка просто обязана прибавлять «движухи» сайту, наши кнопки такую «движуху» имеют, то есть у кнопок три стандартных режима или статуса, это кому как удобней:
- Нормальное состояние — градиент фона, границы и тени.
- При наведении — темный градиент.
- Активный режим — смена направления градиента, 1px вниз, темный цвет шрифта.
CSS3 стили для кнопок
Тихим сапом мы подобрались к основе оформления наших кнопок. Следующий стиль будет общим для вех кнопок .button class. Чтобы сделать масштабируемую базу(тело), мы используем свойство для внутреннего отступа padding и определяем скругление углов border-radius . Это дает нам возможность настроить скругленные углы и размер кнопки, просто изменив границы радиуса, размер шрифта и отступы.
Например: я могу сделать меньше кнопку за счет уменьшения размера шрифта и значения оступа (См. демо).
И так, общий код для стилей кнопок будет таким:
.button display: inline-block; zoom: 1; /* масштабирование и *display = ie7 хак для отображения display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% 'Roboto', sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); > .button:hover text-decoration: none; > .button:active //* смещение на 1px вниз *// position: relative; top: 1px; >
Теперь остается дело за малым, раскрасить наши кнопки и не просто залить фон, а использовать функцию градиента по полной.
Цвета градиента CSS
В приведенном ниже примере показан код стиля CSS для оранжевого цвета нашей кнопки. Первым пунктом прописано значение для браузеров, которые не поддерживают CSS3, так сказать запасной вариант. Дальше по накатанной, вторая линия для браузеров Webkit, третья линия для Firefox, отдельный параметр для новой версии Opera 11, а в последней строке градиента фильтр, который обрабатывает только Internet Explorer.
Подробно и в тему, если кто забыл, расписано в статье Градиент CSS в современных браузерах.
В код прописал некоторые пояснения, для лучшего восприятия:
.orange color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; /*цвет фона кнопки для браузеров без поддержки CSS3*/ background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /* для Webkit браузеров */ background: -moz-linear-gradient(top, #faa51a, #f47a20); /* для Firefox */ background-image: -o-linear-gradient(top, #faa51a, #f47a20); /* для Opera 11 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* фильтр для IE */ > .orange:hover background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); background-image: -o-linear-gradient(top, #f88e11, #f06015);/* для Opera 11 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); > .orange:active color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); background-image: -o-linear-gradient(top, #f47a20, #faa51a);/* для Opera 11 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); >
Надеюсь, что все стало ясно и понятно по поводу создания кнопок, но для тех кто все же не въехал, покажу как использовать стиль для создания и последующего вывода на странице HTML.
Как применять кнопки?
Допустим, вы безудержно захотели синюю кнопку, для использования на своей странице:
- Во-первых нужно скопировать код общего стиля .button и стили для разных состояний кнопки селекторы: .button:hover , и .button:active , затем, для синей кнопы .blue копируете все правила и свойства css, просмотреть исходный код style.css и найти нужный класс.
- Затем прописываете class=»button blue» к элементу HTML, там где вы хотите, например . CSS классы могут быть применены к любому элементу, таким как a , p, span, div, input, button и т.д.
Ну вот, теперь то уж точно все готово, Вы во всеоружии и можете применять рассмотренный выше метод создания кнопок с градиентом CSS, на практике.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 14
Класс : 8 июня, 2011 в 21:20 Обалденные кнопки )спасибо Ответить
Виктор : 10 августа, 2011 в 04:12 Спасибо, взял себе на заметку. Одна проблемка только с этим тупым IE, как бы ни старался microsoft, а css3 толком он не поддержвает, а жаль. Ответить
driver : 10 августа, 2011 в 20:17 Виктор спасибо за отзыв, какие то подвижки в IE9, все же есть, но всеравно кривость этого браузера раздражает. Ответить
Сергей : 29 декабря, 2011 в 04:48 Спасибо большое, css3 рулет. Ответить
Дмитрий : 31 августа, 2012 в 22:45 Классные кнопки, все красиво сделано. Респект! Ответить
driver : 16 сентября, 2012 в 18:07 Спасибо Дмитрий за отзыв. Ответить
Олег : 31 октября, 2012 в 23:53 Извините, но я ОСЕЛ. Отошлите пожалуйста мне на почту (pirate1707@gmail.com) Текстовый документ с кодом, кнопки (Блокнот, ворд7). Если можно то расфасованый по head и body Ответить
driver : 1 ноября, 2012 в 00:45 Ответить
Олег : 3 ноября, 2012 в 02:13 Ответить
driver : 3 ноября, 2012 в 10:40 Ответить
Агент : 30 ноября, 2012 в 13:37 Спасибо за кнопки)) Блин из-за этого Осла нормально CSS3 не применишь. Ответить
Градиентные границы в CSS
Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.
Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:
- Для этого не существует простого и очевидного CSS API.
- Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.
Выглядеть это будет как-то так:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module-border-wrap < max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; >.module
Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).
Вот пример Стивена Шоу, закрепляющий border-radius :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.
.gradient-box < display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >> html < height: 100%; background: #000; display: flex; >body
Но не забывайте полностью о border-image , возможно, самом бестолковом свойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module
Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .
button < background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; >.border-gradient < border-image-slice: 1; border-width: 2px; >.border-gradient-purple < border-image: linear-gradient(to left, #743ad5, #d53a9d); >.border-gradient-green < border-image: linear-gradient(to left, #00C853, #B2FF59); >body < height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; >div < width: 100%; text-align: center; >> div > div < width: 100%; padding: 1rem; >> .on-dark < background: #222; button < color: white; >>Как сверстать такие кнопки с градиентом?
Передо мной встала задача сверстать вот такие кнопки: Не могу понять как сделать градиентом задний фон и границу, чтобы границы оставались закругленными. Заднего фона градиентного я добился, но border сделать градиентом не могу. (Мне необходимо, чтобы и border-radius сохранялся) Подскажите пожалуйста, как это сверстать?
- Вопрос задан более трёх лет назад
- 3259 просмотров
Комментировать
Решения вопроса 1
Вадим Кот @vadimkot Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 6
Павел Беляев @PavelBelyaev
Может просто border-radius делать, он же работает и с нулевой границей и с border: none;
Или закруглять у родительского блока а во вложенном текст и градиентный фон?
Или делать градиентную заливку у родитея и padding 1px, а вложенный блок синенький с текстом.
Если хочешь, что-бы тут тебе помогли, то хотя-бы поделись тем, что у тебя есть и что не получается.
А так все мимо пробегут, таких вопросом очень много тут и понять сложно что хочет автор.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Nevs @Nevs Автор вопроса
Мне нужно больше второй вариант сделать, можете пожалуйста просто дать мне код второй кнопки: Подробнее, с градиентной рамкой?? Очень прошу, а оттуда отталкиваясь я всё сам сделаю