Блог

Главная - Вопросы по программированию - Как сделать градиент холста в качестве фона кнопки при наведении

Как сделать градиент холста в качестве фона кнопки при наведении

#javascript #html #css #canvas #hover

Вопрос:

У меня есть <a> кнопка,

 a {
position: relative;
display: inline-block;
color: #111;
padding: 10px 20px;
border-radius: 10px;
background: #fff;
margin-top: 10px;
}

и на веб-сайте есть классный градиент в качестве фона https://sealzi.com/ (это сделано с <canvas> элементом)

Как я могу сделать градиент (как на веб-сайте) в качестве фона моей кнопки при наведении?

Ответ №1:

Вам просто нужно добавить a:hover и написать background , что вам нравится. Например;

 a:hover{
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    }

Также вы можете изменить color текст кнопки по своему выбору.Для получения более подробной информации, пожалуйста, проверьте w3schools.Надеюсь, это будет полезно.

Ответ №2:

Вы можете попробовать linear-gradient с некоторым углом:

 a {
  position: relative;
  display: inline-block;
  color: #111;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  margin-top: 10px;
}

a:hover {
  color: whitesmoke;
  background: linear-gradient(123deg, rgba(253,0,243,1) 0%, rgba(173,0,255,1) 20%, rgba(20,173,227,1) 80%, rgba(79,206,213,1) 100%);
} 
 <a href="#">Link</a>
Метки: