4

Как можно сделать такой эффект свечения у кнопки как на картинке?

введите сюда описание изображения

3 ответа 3

11

* {
  margin: 0;
  padding: 0;
}

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

button {
  position: relative;
  height: 60px;
  width: 200px;
  border: none;
  outline: none;
  color: white;
  background: #111;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}

button:before {
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}

button:hover:before {
  opacity: 1;
}

button:hover:active {
  background: none;
}

button:hover:active:before {
  filter: blur(2px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <button>hover me</button>
</body>

</html>

0
2

Смысл в том, что нужно заюзать псевдоэлемент, который лежит под кнопкой и заблюрен. Ему задаешь градиент, который тебе нужен. Примерно так
click

.gradient-button
    width: 100px
    height: 30px
    border: none
    background-color: #555
    color: #fff
    font-size: 1.2em
    position: relative
    border-radius: 5px
    &:after
        content: ''
        border-radius: 5px
        position: absolute
        width: 100%
        height: 30px
        filter: blur(3px)
        background: linear-gradient(90deg, red 0%, blue 100%)
        left: 0
        top: 0
        z-index: -1
1

Решение SVG + CSS

Применены фильтры SVG для размытия текста и рамки при наведении курсора

Линейный градиент используется для анимации изменения цвета рамки после клика

Другими словами, анимации будет как в вопросе: при наведении размытие, после клика анимация рамки.

HOVER ME, THEN CLICK ME!

.container {
width: 50vw;
height:50vh;
background:#151515;
}
 .btn {
  fill:transparent;
 stroke:white;
 stroke-width:4;
 stroke:url(#linGrad);
     }
.btn:hover {
filter: url(#blue_glow);
}	
 .txt1 {
 font-size:14px;
 font-weight:500;
 fill:white;
 }

 .txt1:hover {
 filter: url(#blue_glow);
 /* pointer-events:none; */
 }
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 250 60" > 
  <defs>  
     <!-- Градиент для рамки, анимация после клика -->
  <linearGradient id="linGrad" x1="0%" x2="85%" y1="15%" y2="0%" >
   <stop stop-color="#1B9F36" offset="0">
      <animate
    attributeName="stop-color"
	dur="2s"
	values="#1B9F36;#121BC1;#1B9F36"
	begin="gr1.click"
	end="gr1.mouseout"
	repeatCount="indefinite"  /> 
   </stop>   
   <stop stop-color="#121BC1" offset="1"> 
     <animate
	 attributeName="stop-color"
	 dur="2s"
	 values="#121BC1;#06B2E3;#121BC1"
	 begin="gr1.click"
	 end="gr1.mouseout"
	 repeatCount="indefinite" /> 
   </stop>
  </linearGradient>   
       <!-- Размытие рамки и текста при наведении -->
    <filter id="blue_glow" filterUnits="userSpaceOnUse"
            x="-20%" y="-20%" width="120%" height="120%">
           <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur5"/>
           <feColorMatrix result="red-blur" in="blur-merged" type="matrix"
                     values="0.4 0 0 0 0
                             0 1 0 0 0
                             0 0 1 0 0
                             0 0 0.2 1 0" />
      <feMerge>
        <feMergeNode in="red-blur"/>       
        <feMergeNode in="blur5"/>          
        <feMergeNode in="SourceGraphic"/>  
      </feMerge>
    </filter>
 </defs>
       <!-- Чёрный фон       -->
	 <rect width="100%" height="100%" fill="#151515" />
         <!-- Кнопка -->
       <g id="gr1">	  
	  <rect class="btn" x="10" y="10" width="230" height="40" rx="10"/>
	     <text class="txt1" x="30" y="35"  >HOVER ME, THEN CLICK ME!</text>
       </g>
	</svg>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.