Как сделать так что бы огненное кольцо вокруг кнопки было?

Question

Всем доброго времени суток, подскажите пожалуйста, как сделать вокруг кнопки огонь.

Типа этого

Нашел код на canvas, не знаю как уменьшить размеры и подогнать под кнопку, код тут

Answer 1

Меняйте в css

width: 60px;
height: 60px;

Answer 2

Если пример ниже не подходит и нужно больше схожести, то дайте знать.

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn {
  width: 80px;
  margin-top: 23px;
  height: 80px;
  background-color: black;
  border: 8px solid #9D7037;
  position: absolute;
  border-radius: 100%;
  background: #d06d0c;
  background: radial-gradient(circle, #d06d0c 0%, black 65%);
}

.flame {
  width: 150px;
  height: 150px;
  background: linear-gradient(-45deg, red, orange);
  border-radius: 150px 150px 150px 150px;
  transform: rotate(-135deg);
  animation: 0.1s flame infinite;
  filter: blur(10px);
  position: relative;
  border: 45px solid black;
  border-left-width: 25px;
  border-top-width: 25px;
}
.flame:after, .flame:before {
  content: '';
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  background: linear-gradient(-45deg, red, orange);
  animation: 0.2s flame infinite;
  transform: scale(0.8) rotate(20deg);
  border-radius: 100px 100px 100px 100px;
  top: 20px;
}
.flame:before {
  top: 0;
  animation-duration: 0.09s;
  transform: scale(0.9) rotate(-15deg) translate(10px, 0px);
}

@keyframes flame {
  0% {
    height: 150px;
    width: 150px;
  }
  50% {
    height: 140px;
    width: 140px;
  }
  100% {
    height: 150px;
    width: 150px;
  }
}

<div class = "flame"></div>
<div class = "btn"></div>

БЛОГ НА HUSL

Как сделать так что бы огненное кольцо вокруг кнопки было?

Ответы (2 шт):