Если фон заренее известен и однороден, можно просто накрыть градиент плашкой того же цвета.

Для начала соберём кнопку полностью залитую градиентом:

/* html */
        
<button>
  Кнопка
</button>
/* css */

/* Кнопка */
button {
  height: 60px;
  border: 0;
  border-radius: 30px;
  font-size: 20px;
  text-transform: uppercase;
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

Теперь накроем часть кнопки белой плашкой:

/* html */
        
<button>
  <span>Кнопка</span>
</button>
/* css */
        
button {
  /* ... */
        
  /* Зададим отступ со всех сторон равный
  желаемой толщине рамки */
  padding: 4px;
}
        
/* Добавим белую плашку с таким же радиусом
скругления как и у самой кнопки */
button span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  height: 100%;
  border-radius: 30px;
  background: #fff;
}
        
/* Спрячем плашку при наведении */
button:hover span {
  background: transparent;
}

Если фон неизвестен или неравномерен, а скругления не нужны, подойдёт border-image:

/* html */

<button>
  Кнопка
</button>
/* css */
        
/* Кнопка */
button {
  /* ... */
        
  background: none;
  border-width: 4px;
  border-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
  border-image-slice: 1;
}
        
button:hover {
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

В следующем совете попробуем совместить и то, и другое.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы