add fancy underline effect

lektura
max.mehl 2017-06-20 20:44:04 +02:00
parent 2fb1626c17
commit 356737df52
1 changed files with 27 additions and 0 deletions

View File

@ -253,3 +253,30 @@ aside.sharecolumn a#gplus-left {
aside.sharecolumn a#facebook-left {
background-image: url("/img/share/facebook_white.png");
}
/* SPECIAL LINK UNDERLINE EFFECT */
a:not(.btn) {
box-shadow: 0 0 1px transparent;
display: inline-block;
overflow: hidden;
position: relative;
transform: perspective(1px) translateZ(0px);
vertical-align: middle;
}
a:not(.btn)::before {
background: #006d9e none repeat scroll 0 0;
bottom: 0;
content: "";
height: 1px;
left: 50%;
position: absolute;
right: 50%;
transition-duration: 0.3s;
transition-property: left, right;
transition-timing-function: ease-out;
z-index: -1;
}
a:not(.btn):hover::before, a:not(.btn):focus::before, a:not(.btn):active::before {
left: 0;
right: 0;
}