Эффекты при наведении на кнопку с линиями CSS

Эффекты при наведении на кнопку с линиями CSS

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

Пример

Button 1
Button 2
Button 3

HTML


<div class="line-btn line-btn-one"><span>Button 1</span></div>
<div class="line-btn line-btn-two"><span>Button 2</span></div>
<div class="line-btn line-btn-three"><span>Button 3</span></div>

CSS


/* Общие стили */
.line-btn {
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    margin: 5em 0; /* Отступ кнопок */
    color: #83bec5;
    transition: all 0.5s;
    position: relative;
}

/* Button 1 */
.line-btn-one span {
    transition: all 0.3s;
}
.line-btn-one::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: rgba(131,190,197,0.5);
    border-bottom-color: rgba(131,190,197,0.5);
    transform: scale(0.1, 1);
}
.line-btn-one:hover span {
    letter-spacing: 2px;
}
.line-btn-one:hover::before {
    opacity: 1;	
    transform: scale(1, 1);	
}
.line-btn-one::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
    background-color: rgba(131,190,197,0.1);
}
.line-btn-one:hover::after {
    opacity: 0;	
    transform: scale(0.1, 1);
}

/* Button 2 */
.line-btn-two span {
    z-index: 2;	
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;	
}
.line-btn-two::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(131,190,197,0.2);
    background-color: rgba(131,190,197,0.1);
}
.line-btn-two::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(131,190,197,0.2);
    background-color: rgba(131,190,197,0.1);
}
.line-btn-two:hover::before {
    transform: rotate(-45deg);
    background-color: rgba(131,190,197,0);
}
.line-btn-two:hover::after {
    transform: rotate(45deg);
    background-color: rgba(131,190,197,0);
}

/* Button 3 */
.line-btn-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(131,190,197,0.1);
    transition: all 0.3s;
}
.line-btn-three:hover::before {
    opacity: 0 ;
    transform: scale(0.5,0.5);
}
.line-btn-three::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid rgba(131,190,197,0.5);
    transform: scale(1.2,1.2);
}
.line-btn-three:hover::after {
    opacity: 1;
    transform: scale(1,1);
}
By julia