Как сделать прозрачный градиент для кнопки? CSS

Question

Как сделать прозрачный градиент для кнопки? CSS

Рейтинг: 0Ответов: 1Опубликовано: 17.03.2023

.btn3 {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 200px;
    height: 50px;
    font-size: 15px;
    border-radius: 10px;
    background: linear-gradient(to bottom right, #9a13d7, #6965eb, #11c7e9);
    transition: 2s;
    color: #fff;
}

.btn3:hover{
    border-radius: 0px 30px 0px 30px;
}

<button class="btn3"></button>

Нужно сделать полупрозрачность фона в кнопке (градиент). Граница должны остаться без изменений.

css градиент

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

.btn3 {
  position: absolute;
  top: 30%;
  left: 45%;
  width: 200px;
  height: 50px;
  font-size: 15px;
  border-radius: 10px;
  background: linear-gradient(to bottom right, #9a13d7aa, #6965ebaa, #11c7e9aa);
  border: 5px solid green;
  transition: 2s;
  color: #fff;
}

.btn3:hover {
  border-radius: 0px 30px 0px 30px;
}


/* Стили для визуализации прозрачности */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent 0 20px, black 20px 25px)
}

<button class="btn3">qwerty</button>

Как сделать прозрачный градиент для кнопки? CSS

Ответы