Кнопка размытого градиента с анимацией при наведении | Blurred Gradient Button Hover Animation CSS

Всем привет! В этом видео вы узнаете, как создать кнопку с красивым эффектом при наведении мышки, используя только HTML и CSS. Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.

HTML КОД:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Blurred Gradient Button</title>
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>

<button></button>

</body>
</html>
CSS КОД:

*,
*:before,
*:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #fcfcfc;
}

button{
  height: 100px;
  width: 320px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  outline: none;
  box-shadow: 20px 20px 30px rgba(0,0,0,0.1);
  background-color: transparent;
  border: none;
  overflow: hidden;
}

button:before{
  content: "AWESOME";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-family: 'Poppins',sans-serif;
  font-size: 25px;
  letter-spacing: 6px;
  font-weight: 700;
  padding: 32px 0;
  color: #fcfcfc;
  background-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(25px);
  cursor: pointer;
}

button:after{
  content: "";
  height: 500px;
  width: 500px;
  position: absolute;
  left: -90px;
  top: -200px;
  z-index: -1;
  background-image: conic-gradient(
  #ff2e4e,
  #d960ff,
  #9264ff,
  #00b3f9,
  #06cd69,
  #ffcd00,
  #ff5c22,
  #ff2e4e
  );
}

button:hover:after{
  animation: spin 3s linear infinite;
}

@keyframes spin{
  100%{
  transform: rotate(360deg);
}
}

0 Комментарии

Подписывайтесь на Boosty и скачивай БЕСПЛАТНО любые файлы и скрипты!!!

🔥 Стать автором на Boosty »