Как сделать прозрачную кнопку в html?

Пользователь

от guillermo , в категории: HTML/CSS , 2 года назад

Как сделать прозрачную кнопку в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от meta , 2 года назад

@guillermo  Сделать прозрачную кнопку в HTML можно так:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<head>
<style>
      button {
        mix-blend-mode: overlay;
        text-align: center;
      }
    </style>
  </head>
  <body background="путь картинки">
    <button onclick="window.location.href = 'https://dropcode.ru/';">
      Кпопка
    </button>
  </body>

Пользователь

от ella , год назад

@guillermo 

Для создания прозрачной кнопки в HTML можно использовать стили CSS. Для этого можно задать свойство background-color с прозрачным значением rgba(0, 0, 0, 0) или использовать свойство opacity.


Пример использования background-color:

1
<button style="background-color: rgba(0, 0, 0, 0);">Прозрачная кнопка</button>


Пример использования opacity:

1
<button style="opacity: 0.5;">Прозрачная кнопка</button>


Обратите внимание, что при использовании opacity, не только цвет кнопки становится прозрачным, но и содержимое кнопки становится частично прозрачным. Если нужно сделать только цвет кнопки прозрачным, лучше использовать первый способ с background-color.