:root {
--lines-btn-border-color-1: #E3E3E3; /*цвет полос 1*/
--lines-btn-border-color-hover-1: #E3E3E3; /*цвет полос по наведению 1*/
--lines-btn-border-size-1: 1.5px; /*размер полос 1*/
--lines-btn-border-color-2: #0C1417; /*цвет полос 2*/
--lines-btn-border-color-hover-2: #0C1417; /*цвет полос по наведению 2*/
--lines-btn-border-size-2: 1.5px; /*размер полос 2*/
}
/* Левая сторона */
.lines-btn-left:before {
content: '';
border-left: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
height: 4px;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-left:before {
border-left: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-left:nth-child(1):before {
content: '';
border-top: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
width: 4px;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-left:nth-child(1):before {
border-top: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-left:after {
content: '';
border-left: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
height: 4px;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-left:after {
border-left: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-left:nth-child(1):after {
content: '';
border-bottom: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
width: 4px;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-left:nth-child(1):after {
border-bottom: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
/* Правая сторона */
.lines-btn-right:before {
content: '';
border-right: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
height: 4px;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-right:before {
border-right: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-right:nth-child(2):before {
content: '';
border-top: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
width: 4px;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-right:nth-child(2):before {
border-top: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-right:after {
content: '';
border-right: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
height: 4px;
position: absolute;
bottom: 0;
right: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-right:after {
border-right: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
.lines-btn-right:nth-child(2):after {
content: '';
border-bottom: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-1);
width: 4px;
position: absolute;
bottom: 0;
right: 0;
transition: all 0.3s ease;
}
.lines-btn-2 .lines-btn-right:nth-child(2):after {
border-bottom: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-2);
}
/* Эффект по наведению */
.lines-btn:hover .lines-btn-left:before,
.lines-btn:hover .lines-btn-left:after {
height: 50%;
border-left: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-hover-1);
}
.lines-btn-2:hover .lines-btn-left:before,
.lines-btn-2:hover .lines-btn-left:after {
height: 50%;
border-left: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-hover-2);
}
.lines-btn:hover .lines-btn-right:before,
.lines-btn:hover .lines-btn-right:after {
height: 50%;
border-right: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-hover-1);
}
.lines-btn-2:hover .lines-btn-right:before,
.lines-btn-2:hover .lines-btn-right:after {
height: 50%;
border-right: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-hover-2);
}
.lines-btn:hover .lines-btn-left:nth-child(1):before,
.lines-btn:hover .lines-btn-left:nth-child(1):after {
width: 50%;
}
.lines-btn-2:hover .lines-btn-left:nth-child(1):before,
.lines-btn-2:hover .lines-btn-left:nth-child(1):after {
width: 50%;
}
.lines-btn:hover .lines-btn-right:nth-child(2):before,
.lines-btn:hover .lines-btn-right:nth-child(2):after {
width: 50%;
}
.lines-btn-2:hover .lines-btn-right:nth-child(2):before,
.lines-btn-2:hover .lines-btn-right:nth-child(2):after {
width: 50%;
}
.lines-btn:hover .lines-btn-right:nth-child(2):before,
.lines-btn:hover .lines-btn-left:nth-child(1):before {
border-top: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-hover-1);
}
.lines-btn-2:hover .lines-btn-right:nth-child(2):before,
.lines-btn-2:hover .lines-btn-left:nth-child(1):before {
border-top: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-hover-2);
}
.lines-btn:hover .lines-btn-right:nth-child(2):after,
.lines-btn:hover .lines-btn-left:nth-child(1):after {
border-bottom: var(--lines-btn-border-size-1) solid var(--lines-btn-border-color-hover-1);
}
.lines-btn-2:hover .lines-btn-right:nth-child(2):after,
.lines-btn-2:hover .lines-btn-left:nth-child(1):after {
border-bottom: var(--lines-btn-border-size-2) solid var(--lines-btn-border-color-hover-2);
}