Cool link effects

Cool link effects.markdown

Cool link effects

Cool link effects made with SASS.

A Pen by Riccardo Zanutta on CodePen.

License.

index.html

<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>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@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%);
  }
}