Skip to content
.line-button .fl-button {
position: relative!important;
}

.line-button .fl-button {
transition: none!important;
}

.line-button .fl-button:after,
.line-button .fl-button:before {
position: absolute;
width: 100%;
height: 2px;
background: currentColor;
top: 100%;
left: 0;
pointer-events: none;
}

.line-button .fl-button:before {
content: '';
}
.line-button .fl-button:before {
transform-origin: 100% 50%;
transform: scale3d(0,1,1);
transition: transform 0.3s;
}
.line-button .fl-button:hover:before {
transform-origin: 0% 50%;
transform: scale3d(1,1,1);
}

.line-button2 .fl-button {
    position: relative;
    line-height: 20px;
    text-decoration: none;
    transition: color ease-in-out 250ms,border-bottom-color ease-in-out 250ms;
}

.line-button2 .fl-button:before {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    right: 0;
    position: absolute;
    background: 0 0;
    transition: width .5s ease 0s,left .3s ease 0s,right .3s ease 0s;
    width: 99%;
}
.line-button2 .fl-button:hover:before {
    width: 0;
    right: 0;
    background: currentColor;
    transition-delay: .1s;
}
.line-button2 .fl-button:hover:after {
    width: 100%;
    left: 0;
    background: currentColor;
    transition-delay: .1s;
} 


.line-button2 .fl-button:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    right: 0;
    position: absolute;
    background: currentColor;
    transition: width .7s ease 0s,left .3s ease 0s,right .3s ease 0s,background ease-in-out 250ms;
    width: 0;    
}
.line-button2 .fl-button .fl-button-text:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    right: 0;
    position: absolute;
    background: currentColor;
    width: 100%;
}
.line-button2 .fl-button .fl-button-text:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    right: 0;
    position: absolute;
    background: currentColor;
    width: 100%;
}
.line-button2 .fl-button:hover .fl-button-text:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    right: 0;
    position: absolute;
    background: 0 0;
    width: 0;

}


.simpleAnimatedButton .fl-button:hover .fl-button-icon {
left: 0;
}

.simpleAnimatedButton .fl-button .fl-button-icon {
margin: 0!important;
font-size: 20px;
position: relative;
left: -4px;
transition: 0.3s all;
}
.simpleAnimatedButton2 .fl-button:hover .fl-button-icon {
top: -3px;
}

.simpleAnimatedButton2 .fl-button .fl-button-icon {
margin: 0!important;
font-size: 20px;
position: relative;
left: -4px;
transition: 0.3s all;
top: 0;
}

.simpleAnimatedButton3 .fl-button:hover .fl-button-icon {
top: 3px;
}

.simpleAnimatedButton3 .fl-button .fl-button-icon {
margin: 0!important;
font-size: 20px;
position: relative;
transition: 0.3s all;
top: 0;
}



.custom-button .fl-button:before,
.custom-button .fl-button:after {
position: absolute;
content: "";
}

.custom-button .fl-button {
position: relative;
display: inline-block;
background-color: transparent;
border: none;
cursor: pointer;
}
.custom-button .fl-button {
padding: 5px;
}

.custom-button .fl-button:before,
.custom-button .fl-button:after {
background: transparent;
z-index: 2;
}
.custom-button .fl-button:before,
.custom-button .fl-button:after {
width: 0%; height: 0%;
opacity: 0;
transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.custom-button .fl-button:before {
top: 0; right: 0;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
}
.custom-button .fl-button:after {
bottom: 0; left: 0;
border-bottom: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.custom-button .fl-button:hover:before,
.custom-button .fl-button:hover:after {
width: 100%; height: 99%;
opacity: 1;
transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;
}