Сделать градиент фона кнопки

Я пытаюсь понять, как сделать градиент фона кнопки.

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

Это инструмент, который я использую:

http://www.colorzilla.com/gradient-editor/

Я копирую кнопки на этой странице:

https://www.stickermule.com/

Желаемый результат:

Сделать градиент фона кнопки

Что у меня есть:

Сделать градиент фона кнопки

Этот код предлагает инструмент:

.btn-muestrasgratis, .btn-muestrasgratis:active, .btn-muestrasgratis:visited {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febf01+0,d66802+82;Yellow+Flat */
background: #febf01; /* Old browsers */
background: -moz-linear-gradient(top, #febf01 0%, #d66802 82%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #febf01 0%,#d66802 82%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #febf01 0%,#d66802 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#d66802',GradientType=0 ); /* IE6-9 */
}

ОБНОВЛЕНИЕ 1:

Он работал при использовании тега, а не при использовании тега кнопки.

При использовании тега кнопки у кнопки есть рамка. Это не так гладко, как использовать метку.

Я бы предпочел использовать тег кнопки.

Я не знаю, важно ли использование тега или тега кнопки, учитывая, что он будет отправлять данные на сервер как веб-приложение django.

    <div class = "btn-group mr-4" role = "group" aria-label = "First group">
        <button type = "button" class = "btn btn-comprar btn-xlarge text-white">Comprar</button>

</div>
    <a href = "#" class = "btn-comprar">Shop now</a>

Сделать градиент фона кнопки

Вам нужно, чтобы btn походил на stickermule.com?

— 29.09.2018 06:07

@AnureshVP в точности как он.

— 29.09.2018 06:10

html css

29.09.2018 06:02

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 631

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, попробуйте это, используя background-image и background-color

a.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
}

<a href = "#" class = "btn">Shop now</a>

Обновлять Добавить border:none;

button.btn {
  text-decoration: none;
  background-color: #5ba4e6;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  letter-spacing: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -ms-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  -o-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  background-image: linear-gradient(to bottom,rgba(255,255,255,.09) 0%,rgba(0,0,0,.09) 100%);
  font-size: 1.4rem;
  padding: 22px 30px;
  border-radius: 6px;
  border:none;
}
button.btn:focus {
	outline:none;
}

<button class = "btn" >Shop now</button>

@OmarGonzales Посмотреть обновление

— 29.09.2018 06:41

ты, Ануреш. Отлично работает!

— 29.09.2018 06:48

29.09.2018 06:14

Другие вопросы по теме

Скрыть раскрывающийся список переменных продуктов с уникальным вариантом, выбранным по умолчанию в Woocommerce

Как использовать тег <a> с тегом <content>

Нежелательное белое пространство по оси Y сбоку от col - bootstrap css

Не удается заставить кладку работать с инициализацией HTML

Как я могу выровнять содержимое в div с содержимым вне его в начальной загрузке?

Angular5 PrimeNG Datatable в модальном окне с ContextMenu, отображаемым за модальным окном

Как убедиться, что имя умещается в отведенном для этого месте на сайте

Etch-A-Sketch (JavaScript) случайный цвет и функция стирания не работают

При установке автоматической высоты для контейнера он сдвигает страницу

Изменить цвет текста переднего плана на основе ввода цвета фона

Сделать градиент фона кнопки

Ответы 1

Другие вопросы по теме

Похожие вопросы