Metode Mudah Membuat Hover Direction

Metode Mudah Membuat Hover Direction - Ya Metode Mudah Membuat Hover Direction. Mungkin sebagian blogger sudah tau apa itu hover dan apa itu direct. Pada kesempatan kali ini saya akan membagaikan Metode Mudah Membuat Hover Direction. Cermati dan pamahi.


@import url(http://fonts.googleapis.com/css?family=Lato:100,400,900);

a {
    -moz-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -o-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -webkit-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    font-family: "Lato";
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 6px;
    text-transform: uppercase;
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    color: #d2d4d7;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    padding: 25px 30px;
}

a i {
    position: absolute;
    display: inline-block;
    background-color: #d2d4d7;
    border-radius: 50%;
    -moz-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.35s ease-in-out, background-color 0.15s ease-in-out;
    -moz-transition: -moz-transform 0.35s ease-in-out, background-color 0.15s ease-in-out;
    -ms-transition: -ms-transform 0.35s ease-in-out, background-color 0.15s ease-in-out;
    -o-transition: -o-transform 0.35s ease-in-out, background-color 0.15s ease-in-out;
    transition: transform 0.35s ease-in-out, background-color 0.15s ease-in-out;
    z-index: -1;
}

a:before {
    content: "";
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    border: 3px solid #d2d4d7;
    background-color: transparent;
    z-index: -1;
    top: 0;
    left: 0;
}

a:hover {
    color: white;
}

a:hover:before {
    border-color: #ff4851;
}

a:hover i {
    -moz-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    background-color: #ff4851;
}

 
(function() {
  var a, focusEl, n;

  a = document.getElementsByTagName("a");

  n = 0;

  while (n < a.length) {
    focusEl = document.createElement("i");
    a[n].appendChild(focusEl);
    a[n].handler = function(e) {
      var i, padding, s, x, xdis, y, ydis;
      if (e.target.tagName.toLowerCase() === "a") {
        i = this.getElementsByTagName("i")[0];
        s = Math.max(this.offsetWidth * 2.75, this.offsetHeight * 2.75);
        i.style.width = i.style.height = "" + s + "px";
        padding = 10;
        x = e.offsetX;
        y = e.offsetY;
        xdis = Math.min(x, this.offsetWidth - x);
        ydis = Math.min(y, this.offsetHeight - y);
        if (ydis < xdis) {
          if (ydis === y) {
            y = -padding;
          } else {
            y = this.offsetHeight + padding;
          }
        } else {
          if (xdis === x) {
            x = -padding;
          } else {
            x = this.offsetWidth + padding;
          }
        }
        i.style.top = "" + y + "px";
        return i.style.left = "" + x + "px";
      }
    };
    a[n].addEventListener("mouseover", function(e) {
      return this.handler(e);
    });
    a[n].addEventListener("mouseout", function(e) {
      return this.handler(e);
    });
    n++;
  }

}).call(this);


<a href="http://jumbocell.com/">Hover</a>

Demo

View me

Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell