LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Fork me on GitHub

Hover.css

2D Transforms

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Rotate Grow Rotate Float Sink Hover Hang Skew Skew Forward Wobble Horizontal Wobble Vertical Wobble Top Wobble Bottom

Border Transitions

Border Fade Hollow Trim Outline Outward Outline Inward Round Corners

Shadow and Glow Transitions

Glow Box Shadow Outset Box Shadow Inset Float Shadow Hover Shadow Shadow Radial

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left
CSS
/*
 * Hover.css (https://ianlunn.co.uk/)
 * Version: 1.0
 * Author: Ian Lunn @IanLunn
 * Author URL: https://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * https://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #ececec;
  text-decoration: none;
  color: #666;
}

/* 2D TRANSITIONS */
/* Grow */
.grow {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.grow:hover {
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.shrink:hover {
  transform: scale(0.9);
}

/* Pulse */
@keyframes pulse {
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}
.pulse {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.pulse:hover {
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pulse Grow */
@keyframes pulse-grow {
  to {
    transform: scale(1.1);
  }
}
.pulse-grow {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.pulse-grow:hover {
  animation-name: pulse-grow;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Pulse Shrink */
@keyframes pulse-shrink {
  to {
    transform: scale(0.9);
  }
}
.pulse-shrink {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.pulse-shrink:hover {
  animation-name: pulse-shrink;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Push */
@keyframes push {
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.push {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.push:hover {
  animation-name: push;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

/* Pop */
@keyframes pop {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.pop {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.pop:hover {
  animation-name: pop;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

/* Rotate */
.rotate {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.rotate:hover {
  transform: rotate(4deg);
}

/* Grow Rotate */
.grow-rotate {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.grow-rotate:hover {
  transform: scale(1.1) rotate(4deg);
}

/* Float */
.float {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.float:hover {
  transform: translateY(-5px);
}

/* Sink */
.sink {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.sink:hover {
  transform: translateY(5px);
}

/* Hover */
@keyframes hover {
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(-6px);
  }
}
.hover {
  display: inline-block;
  transition-duration: .5s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hover:hover {
  transform: translateY(-6px);
  animation-name: hover;
  animation-duration: 1.5s;
  animation-delay: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Hang */
@keyframes hang {
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(6px);
  }
}
.hang {
  display: inline-block;
  transition-duration: .5s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hang:hover {
  transform: translateY(6px);
  animation-name: hang;
  animation-duration: 1.5s;
  animation-delay: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Skew */
.skew {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.skew:hover {
  transform: skew(-10deg);
}

/* Skew Forward */
.skew-forward {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  transform-origin: 0 100%;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.skew-forward:hover {
  transform: skew(-10deg);
}

/* Wobble Vertical */
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
.wobble-vertical {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.wobble-vertical:hover {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@keyframes wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
.wobble-horizontal {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.wobble-horizontal:hover {
  animation-name: wobble-horizontal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* Wobble Top */
@keyframes wobble-top {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}
.wobble-top {
  display: inline-block;
  transform-origin: 0 100%;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.wobble-top:hover {
  animation-name: wobble-top;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* Wobble Bottom */
@keyframes wobble-bottom {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}
.wobble-bottom {
  display: inline-block;
  transform-origin: 100% 0;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.wobble-bottom:hover {
  animation-name: wobble-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover {
  box-shadow: inset 0 0 0 4px #666, 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: background;
  transform: translateZ(0);
  /* Hack to improve performance on mobile/tablet devices */
  box-shadow: inset 0 0 0 4px #ececec, 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover {
  background: none;
}

/* Trim */
.trim {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  transition-duration: 0.3s;
  transition-property: opacity;
}
.trim:hover:before {
  opacity: 1;
}

/* Outline Outward */
.outline-outward {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.outline-outward:before {
  content: '';
  position: absolute;
  border: #ececec solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-duration: .3s;
  transition-property: top right bottom left;
}
.outline-outward:hover:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline Inward */
.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.outline-inward:before {
  content: '';
  position: absolute;
  border: #ececec solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  transition-duration: .3s;
  transition-property: top right bottom left;
}
.outline-inward:hover:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */
.round-corners {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: border-radius;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.round-corners:hover {
  border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.glow:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Outset */
.box-shadow-outset {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.box-shadow-outset:hover {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */
.box-shadow-inset {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
}
.box-shadow-inset:hover {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform opacity;
}
.float-shadow:hover {
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before {
  opacity: 1;
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Hover Shadow */
@keyframes hover {
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(-6px);
  }
}
@keyframes hover-shadow {
  0% {
    transform: translateY(6px);
    opacity: .4;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
  100% {
    transform: translateY(6px);
    opacity: .4;
  }
}
.hover-shadow {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform opacity;
}
.hover-shadow:hover {
  transform: translateY(-6px);
  animation-name: hover;
  animation-duration: 1.5s;
  animation-delay: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hover-shadow:hover:before {
  opacity: .4;
  transform: translateY(6px);
  animation-name: hover-shadow;
  animation-duration: 1.5s;
  animation-delay: .3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Shadow Radial */
.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.shadow-radial:before, .shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  transition-duration: 0.3s;
  transition-property: opacity;
}
.shadow-radial:before {
  bottom: 100%;
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after {
  top: 100%;
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:hover:after {
  opacity: 1;
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  transition-duration: 0.3s;
  left: calc(50% - 10px);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ececec transparent;
  transition-property: top;
}
.bubble-top:hover:before {
  top: -10px;
}

/* Bubble Right */
.bubble-right {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  transition-duration: 0.3s;
  transition-property: right;
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ececec;
}
.bubble-right:hover:before {
  right: -10px;
}

/* Bubble Bottom */
.bubble-bottom {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  transition-duration: 0.3s;
  transition-property: bottom;
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: #ececec transparent transparent transparent;
}
.bubble-bottom:hover:before {
  bottom: -10px;
}

/* Bubble Left */
.bubble-left {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  transition-duration: 0.3s;
  transition-property: left;
  top: calc(50% - 10px);
  left: 0;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ececec transparent transparent;
}
.bubble-left:hover:before {
  left: -10px;
}

/* Bubble Float Top */
.bubble-float-top {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-float-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ececec transparent;
  transition-duration: 0.3s;
  transition-property: top;
}
.bubble-float-top:hover {
  transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before {
  top: -10px;
}

/* Bubble Float Right */
.bubble-float-right {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-float-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: 0;
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ececec;
  transition-duration: 0.3s;
  transition-property: right;
}
.bubble-float-right:hover {
  transform: translateX(-5px);
}
.bubble-float-right:hover:before {
  right: -10px;
}

/* Bubble Float Bottom */
.bubble-float-bottom {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-float-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #ececec transparent transparent transparent;
  transition-duration: 0.3s;
  transition-property: bottom;
}
.bubble-float-bottom:hover {
  transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before {
  bottom: -10px;
}

/* Bubble Float Left */
.bubble-float-left {
  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.bubble-float-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: calc(50% - 10px);
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ececec transparent transparent;
  transition-duration: 0.3s;
  transition-property: left;
}
.bubble-float-left:hover {
  transform: translateX(5px);
}
.bubble-float-left:hover:before {
  left: -10px;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
  transition-property: width height;
}
.curl-top-left:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */
.curl-top-right {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.curl-top-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
  transition-property: width height;
}
.curl-top-right:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
  transition-property: width height;
}
.curl-bottom-right:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left {
  display: inline-block;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
  transition-property: width height;
}
.curl-bottom-left:hover:before {
  width: 25px;
  height: 25px;
}

.link {
  display: block;
  width: 100%;
  text-align: center;
}

.link a {
  font-weight: bold;
}

#forkongithub a {
  background: #000;
  color: #fff;
  text-decoration: none;
  font-family: arial, sans-serif;
  text-align: center;
  font-weight: bold;
  padding: 5px 40px;
  font-size: 1rem;
  line-height: 2rem;
  position: relative;
  transition: 0.5s;
}

#forkongithub a:hover {
  background: #060;
  color: #fff;
}

#forkongithub a::before, #forkongithub a::after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  height: 1px;
  background: #fff;
}

#forkongithub a::after {
  bottom: 1px;
  top: auto;
}

@media screen and (min-width: 800px) {
  #forkongithub {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 200px;
    overflow: hidden;
    height: 200px;
  }

  #forkongithub a {
    width: 200px;
    position: absolute;
    top: 60px;
    right: -60px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  }
}

Description

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.
Term
Mon, 11/27/2017 - 21:26

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv