Как сделать такое свечение для кнопки?

Question

Хочу сделать такое свечение для кнопки Home

пока не совсем то получается

.navbar a.active {
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

.navbar a.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    background: radial-gradient(circle, #01ffff 0%, rgba(159, 218, 242, 0) 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.5;
}

<div class="navbar w-100 d-flex justify-content-around">
        <a class="d-flex flex-column align-items-center active" href="#">
            <img src="./images/home.svg" />
            <span>Home</span>
        </a>

        <a class="d-flex flex-column align-items-center" href="#">
            <img src="./images/task.svg" />
            <span>Tasks</span>
        </a>
</div>

Answer 1

В Вашем коде, который Вы привели, приблизительно похожий эффект и получается, поэтому не очень понятно, что именно Вас в нем не устраивает.

На практике я, обычно, делаю подобное свечение заданием нескольких теней элементу через свойство box-shadow. В Вашем случае навскидку можу посоветовать у псевдоэлемента before убрать ширину и высоту и указать ему что-то типа:

box-shadow: 0 0 5px #9FDAF2, 0 0 25px #9FDAF2, 0 0 50px #9FDAF2;

(только значения подрегулируйте под Ваш макет)

БЛОГ НА HUSL

Как сделать такое свечение для кнопки?

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