Just a little labs site
(
You can edit the HTML and CSS fields to experiment with the styles
)
Pattern
Links
→
Subtle Animated Link Style
My Link Text 1
/
My Link Text 2
/
My Link Text 3
HTML
My Link Text 1
/
My Link Text 2
/
My Link Text 3
CSS
a.demo {padding-bottom:6px} /* Underline Reveal from the hover.css library */ .hvr-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #2098d1; height: 4px; -webkit-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before { -webkit-transform: translateY(0); transform: translateY(0);
hide
Fonts