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 that you have read and understand our privacy policy and code of conduct.

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