Cool link effects made with SASS.
A Pen by Riccardo Zanutta on CodePen.
-
-
Save CodeMyUI/fd38f468e0ca23867608 to your computer and use it in GitHub Desktop.
Cool link effects
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Webdesigner Depot Rollover link effect</h1> | |
| <a href="#" class="link1"><span data-title="Text Link">Text Link</span></a> | |
| <h2>Cool Underline</h2> | |
| <a href="#" class="link2">Text Link</a> | |
| <h2>Show That Link</h2> | |
| <a href="https://twitter.com/RiccardoZanutta" class="link3" target="_blank">Text Link</a> | |
| <h2>Up</h2> | |
| <a href="#" class="link4">Text Link</a> | |
| <h2>Slide in</h2> | |
| <div class="link5"> | |
| <a href="" class="link5"><span data-hover="Text Link">Text Link</span></a> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "bourbon"; | |
| // Demo styles | |
| body { | |
| font-family: "Lato", sans-serif; | |
| background: #92c7d6; | |
| margin: 0; | |
| color: #334; | |
| -webkit-font-smoothing: antialiased; | |
| text-align: center; | |
| padding: 40px 20px; | |
| line-height: 1.2em; | |
| } | |
| h1, h2 { | |
| font-size: 2em; | |
| margin: 40px 0; | |
| } | |
| @media only screen and(max-width: 680px) { | |
| h1, h2 { | |
| font-size: 1.3em; | |
| } | |
| } | |
| a, a:link, a:visited { | |
| text-decoration: none; | |
| color: #03c; | |
| } | |
| /* Link 1 */ | |
| .link1 { | |
| display: inline-block; | |
| overflow: hidden; | |
| vertical-align: top; | |
| perspective: 600px; | |
| perspective-origin: 50% 50%; | |
| &:hover span { | |
| background: #03c; | |
| transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); | |
| } | |
| span { | |
| display: block; | |
| position: relative; | |
| padding: 4px; | |
| transition: all 400ms ease; | |
| transform-origin: 50% 0%; | |
| transform-style: preserve-3d; | |
| &:after { | |
| content: attr(data-title); | |
| display: block; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| padding: 4px; | |
| color: #fff; | |
| background: #03c; | |
| transform-origin: 50% 0%; | |
| transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); | |
| } | |
| } | |
| } | |
| /* Link2 */ | |
| .link2 { | |
| position: relative; | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -.4em; | |
| left: 50%; | |
| right: 50%; | |
| height: 1px; | |
| background: currentColor; // system color | |
| transition: all ease .2s; | |
| } | |
| &:hover:after { | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| } | |
| &:before { | |
| position: absolute; | |
| transform: translateX(-100%); | |
| left: -10px; | |
| color: #eee; | |
| opacity: .3; | |
| font-weight: 100; | |
| font-size: .8em; | |
| } | |
| } | |
| /* Link 3 */ | |
| a[href*="http"], a[href*="."], .link3 { | |
| position: relative; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| &:active { | |
| background: inherit; | |
| color: inherit; | |
| } | |
| &:hover:before { | |
| content: attr(href); | |
| display: block; | |
| border-color: #2678c6; | |
| position: absolute; | |
| top: -2.5em; | |
| left: -3em; | |
| padding: 0.35em; | |
| background: #03c; | |
| color: #f7f7f7; | |
| font-size: .9em; | |
| white-space: nowrap; | |
| } | |
| } | |
| /* Link 4 */ | |
| .link4 { | |
| display: inline-block; | |
| transition-duration: 0.3s; | |
| transition-property: transform; | |
| transform: translateZ(0); | |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0); | |
| &:hover { | |
| transform: translateY(-3px); | |
| color: lighten(#03c, 15%); | |
| } | |
| } | |
| /* Link 5 */ | |
| .link5 { | |
| overflow: hidden; | |
| padding: 0 4px; | |
| height: 1em; | |
| a { | |
| span { | |
| &:before { | |
| position: absolute; | |
| top: 100%; | |
| content: attr(data-hover); | |
| font-weight: 700; | |
| transform: translate3d(0,0,0); | |
| } | |
| } | |
| } | |
| span { | |
| position: relative; | |
| display: inline-block; | |
| transition: transform 0.3s; | |
| } | |
| &:hover span, | |
| &:focus span { | |
| transform: translateY(-100%); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment