CSS: исправить код для кнопки "при наведении" в анимацию при статичном состоянии

Mahol
На сайте с 20.11.2016
Offline
102
162

Доброго вечера. Можете подсказать, что-то запутался в стилях.
Как переделать этот css-код светящейся при наведении кнопки в код для анимации статичной кнопки, то есть, даже когда курсор не наведен, кнопка должна светиться. 


html,

body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100vh;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    background: #000;

}



.glow-on-hover {

    width: 220px;

    height: 50px;

    border: none;

    outline: none;

    color: #fff;

    background: #111;

    cursor: pointer;

    position: relative;

    z-index: 0;

    border-radius: 10px;

}



.glow-on-hover:before {

    content: '';

    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

    position: absolute;

    top: -2px;

    left:-2px;

    background-size: 400%;

    z-index: -1;

    filter: blur(5px);

    width: calc(100% + 4px);

    height: calc(100% + 4px);

    animation: glowing 20s linear infinite;

    opacity: 0;

    transition: opacity .3s ease-in-out;

    border-radius: 10px;

}



.glow-on-hover:active {

    color: #000

}



.glow-on-hover:active:after {

    background: transparent;

}



.glow-on-hover:hover:before {

    opacity: 1;

}



.glow-on-hover:after {

    z-index: -1;

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background: #111;

    left: 0;

    top: 0;

    border-radius: 10px;

}



@keyframes glowing {

    0% { background-position: 0 0; }

    50% { background-position: 400% 0; }

    100% { background-position: 0 0; }

}


HT
На сайте с 09.04.2017
Offline
63
#1
Mahol :

даже когда курсор не наведен, кнопка должна светиться. 

Где opacity: 0; заменить на opacity: 1;

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий