Хотите иметь у себя красивый эффект линий для кнопок при наведении на чистом CSS? Тогда думаю что вам данный вид реализации должен понравиться. Эффекты кнопок при наведения курсора с использованием псевдоэлементов. Как обычно, цвет, размер, эффект и многое другое настраивается в стилях. Класс эффекта указан на самих кнопках в демонстрации, что облегчает их настройку.
1. Вставляем в нужное место :
.btn-1 {color: #589a4b !important;}
.btn-2 {color: #624e5b !important;}
.btn-3 {color: #835054 !important;}
.btn-4 {color: #55804d !important;}
.btn-5 {color: #3e929e !important;}
.btn-6 {color: #868083 !important;}
.btn-7 {color: #4b6670 !important;}
.btn-8 {color: #5c6347 !important;}
.btn {
display: block;
position: relative;
overflow: hidden;
padding: 1.5rem;
text-decoration: none;
}
.btn:before,
.btn:after,
.btn .btn--inner:before,
.btn .btn--inner:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: currentColor;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.btn--cw:after,
.btn--ccw:after,
.btn--cw-tlbr:after,
.btn--ccw-tlbr:after,
.btn--cw-trbl:after,
.btn--ccw-trbl:after {
top: auto;
right: 0;
bottom: 0;
left: auto;
}
.btn--cw .btn--inner:before,
.btn--ccw .btn--inner:before,
.btn--cw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:before,
.btn--cw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:before {
right: 0;
left: auto;
}
.btn--cw .btn--inner:after,
.btn--ccw .btn--inner:after,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl .btn--inner:after {
top: auto;
bottom: 0;
}
.btn--cw:before,
.btn--cw:after {
width: 0;
height: 2px;
}
.btn--cw .btn--inner:before,
.btn--cw .btn--inner:after {
width: 2px;
height: 0;
}
.btn--cw:hover:before,
.btn--cw:hover:after {
width: 100%;
}
.btn--cw:hover .btn--inner:before,
.btn--cw:hover .btn--inner:after {
height: 100%;
}
.btn--ccw:before,
.btn--ccw:after {
width: 2px;
height: 0;
}
.btn--ccw .btn--inner:before,
.btn--ccw .btn--inner:after {
width: 0;
height: 2px;
}
.btn--ccw:hover:before,
.btn--ccw:hover:after {
height: 100%;
}
.btn--ccw:hover .btn--inner:before,
.btn--ccw:hover .btn--inner:after {
width: 100%;
}
.btn--tlbr:before,
.btn--tlbr:after {
width: 0;
height: 2px;
}
.btn--tlbr:after,
.btn--tlbr .btn--inner:after {
top: auto;
right: 0;
bottom: 0;
left: auto;
}
.btn--tlbr .btn--inner:before,
.btn--tlbr .btn--inner:after {
width: 2px;
height: 0;
}
.btn--tlbr:hover:before,
.btn--tlbr:hover:after {
width: 100%;
}
.btn--tlbr:hover .btn--inner:before,
.btn--tlbr:hover .btn--inner:after {
height: 100%;
}
.btn--trbl:before,
.btn--trbl:after {
width: 0;
height: 2px;
}
.btn--trbl:before,
.btn--trbl .btn--inner:before {
right: 0;
left: auto;
}
.btn--trbl:after,
.btn--trbl .btn--inner:after {
top: auto;
bottom: 0;
}
.btn--trbl .btn--inner:before,
.btn--trbl .btn--inner:after {
width: 2px;
height: 0;
}
.btn--trbl:hover:before,
.btn--trbl:hover:after {
width: 100%;
}
.btn--trbl:hover .btn--inner:before,
.btn--trbl:hover .btn--inner:after {
height: 100%;
}
.btn--cw-tlbr:before,
.btn--cw-tlbr:after,
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after,
.btn--ccw-tlbr:before,
.btn--ccw-tlbr:after,
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after,
.btn--cw-trbl:before,
.btn--cw-trbl:after,
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after,
.btn--ccw-trbl:before,
.btn--ccw-trbl:after,
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after {
-webkit-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
}
.btn--cw-tlbr:before,
.btn--cw-tlbr:after {
width: 0;
height: 2px;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--cw-tlbr .btn--inner:before,
.btn--cw-tlbr .btn--inner:after {
width: 2px;
height: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--cw-tlbr:hover:before,
.btn--cw-tlbr:hover:after {
width: 100%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--cw-tlbr:hover .btn--inner:before,
.btn--cw-tlbr:hover .btn--inner:after {
height: 100%;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--ccw-tlbr:before,
.btn--ccw-tlbr:after {
width: 2px;
height: 0;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--ccw-tlbr .btn--inner:before,
.btn--ccw-tlbr .btn--inner:after {
width: 0;
height: 2px;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--ccw-tlbr:hover:before,
.btn--ccw-tlbr:hover:after {
height: 100%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--ccw-tlbr:hover .btn--inner:before,
.btn--ccw-tlbr:hover .btn--inner:after {
width: 100%;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--cw-trbl:before,
.btn--cw-trbl:after {
width: 0;
height: 2px;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--cw-trbl .btn--inner:before,
.btn--cw-trbl .btn--inner:after {
width: 2px;
height: 0;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--cw-trbl:hover:before,
.btn--cw-trbl:hover:after {
width: 100%;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--cw-trbl:hover .btn--inner:before,
.btn--cw-trbl:hover .btn--inner:after {
height: 100%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--ccw-trbl:before,
.btn--ccw-trbl:after {
width: 2px;
height: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.btn--ccw-trbl .btn--inner:before,
.btn--ccw-trbl .btn--inner:after {
width: 0;
height: 2px;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--ccw-trbl:hover:before,
.btn--ccw-trbl:hover:after {
height: 100%;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.btn--ccw-trbl:hover .btn--inner:before,
.btn--ccw-trbl:hover .btn--inner:after {
width: 100%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
