Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Buttons with Hover/Click/Hold Animating Effects

Written by @kerixa 22 May 2020

Get rid of simple buttons and make them more attractive. Below are five examples of animating buttons. They look simple, but when they are hovered, clicked or Hold, a beautiful animation is appeared. These animations are light and made only by the aid of HTML, Javascript and CSS! No flash or video has been included. Use and Enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
  margin: 0px;
  background: #000;
}

.cbtn-wrap {
  overflow: hidden;
  text-align: center;
  margin-top: 50px;
}

#cbtn-title {
  position: relative;
  font-family: Montserrat;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: underline;
}

.cbtn-o {
  display: inline-block;
  position: relative;
}
.cbtn-o > .cbtn-i {
  position: relative;
  z-index: 3;
  cursor: pointer;
  margin: 40px 20px;
  padding: 10px 25px;
  border-radius: 100px;
  font-family: Montserrat;
  font-weight: 600;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  transition: 250ms cubic-bezier(0, 0.5, 0.5, 1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cbtn-o > .cbtn-i[data-mode="0"] {
  background: #e96651;
  box-shadow: 0px 0px 0px #e96651;
}
.cbtn-o > .cbtn-i[data-mode="0"]:hover {
  transform: scale(0.9);
  background: #efaf60;
  box-shadow: 0px 0px 30px #efaf60;
}
.cbtn-o > .cbtn-i[data-mode="0"]:active {
  transform: scale(1);
}
.cbtn-o > .cbtn-i[data-mode="1"] {
  background: #3770a0;
  box-shadow: 0px 0px 0px #3770a0;
}
.cbtn-o > .cbtn-i[data-mode="1"]:hover {
  transform: scale(0.9);
  background: #77b6ea;
  box-shadow: 0px 0px 20px #77b6ea;
}
.cbtn-o > .cbtn-i[data-mode="1"]:active {
  transform: scale(0.6);
}
.cbtn-o > .cbtn-i[data-mode="2"] {
  background: #30a254;
  box-shadow: 0px 0px 0px #30a254;
  transition: 350ms cubic-bezier(0, 0.5, 0.5, 1);
}
.cbtn-o > .cbtn-i[data-mode="2"]:hover {
  transform: scale(0.9);
  background: #51e980;
  box-shadow: 0px 0px 30px #51e980;
}
.cbtn-o > .cbtn-i[data-mode="2"]:active {
  transform: scale(0.9) rotateX(-360deg);
}
.cbtn-o > .cbtn-i[data-mode="3"] {
  background: #8e54ff;
  box-shadow: 0px 0px 0px #8e54ff;
}
.cbtn-o > .cbtn-i[data-mode="3"]:hover {
  transform: scale(0.9);
  background: #a93ee0;
  box-shadow: 0px 0px 30px #a93ee0;
}
.cbtn-o > .cbtn-i[data-mode="3"]:active {
  transform: scale(0.9) rotate(-360deg);
}
.cbtn-o > .cbtn-i[data-mode="4"] {
  background: #ff0000;
  box-shadow: 0px 0px 0px #ff0000;
}
.cbtn-o > .cbtn-i[data-mode="4"]:hover {
  transform: scale(0.9);
  background: #ff0000;
  box-shadow: 0px 0px 30px #ff0000;
}
.cbtn-o > .cbtn-i[data-mode="4"]:active {
  transition: none;
  filter: blur(7px);
  color: transparent;
}
.cbtn-o > canvas {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
}

.cbtn-nav {
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
  text-shadow: 2px 2px 4px #111;
}
.cbtn-nav#nav-next {
  margin-left: 20px;
}
.cbtn-nav#nav-next::before {
  left: 15px;
}
.cbtn-nav#nav-prev {
  margin-right: 20px;
}
.cbtn-nav#nav-prev::before {
  left: 17px;
}
.cbtn-nav:hover::before {
  width: 40px;
  height: 40px;
}
.cbtn-nav::before {
  content: "";
  position: absolute;
  border-radius: 100px;
  top: 20px;
  transform: translate(-50%, -50%);
  height: 0px;
  width: 0px;
  background: #333333;
  z-index: -1;
  transition: 150ms ease-in-out;
}

.next_anim {
  animation: next 600ms ease;
  pointer-events: none;
}

.prev_anim {
  animation: prev 600ms ease;
  pointer-events: none;
}

.info-wrap {
  font-family: Montserrat;
}
.info-wrap > .info-text {
  display: inline-block;
  color: #333333;
  width: 30%;
  max-width: 300px;
  padding: 15px;
  background: #ccc;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
}

@keyframes next {
  0% {
    left: 0px;
    opacity: 1;
  }
  50% {
    left: 300px;
    opacity: 0;
  }
  50.1% {
    left: -300px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@keyframes prev {
  0% {
    left: 0px;
    opacity: 1;
  }
  50% {
    left: -300px;
    opacity: 0;
  }
  50.1% {
    left: 300px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
.social {
  z-index: 1001;
  position: absolute;
  bottom: 20px;
  left: 30px;
}
.social .icon {
  display: inline-block;
}
.social .icon:hover img {
  transform: scale(0.8);
}
.social .icon img {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: relative;
  transition: 150ms cubic-bezier(0, 0.5, 0.5, 1);
}
.social .icon::before {
  content: "";
  position: absolute;
  border-radius: 100px;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  height: 0px;
  width: 0px;
  background: #333;
  z-index: -1;
  transition: 150ms cubic-bezier(0, 0.5, 0.5, 1);
}
.social .icon:hover::before {
  height: 50px;
  width: 50px;
}
</style>

<div class="cbtn-wrap">
<div id="cbtn-title"></div>
<div class="cbtn-nav" id="nav-prev">
<i class="fas fa-chevron-left"></i>
</div>
<div class="cbtn-o" id="cbtn1">
<div class="cbtn-i" data-mode="0">Hover / Click / Hold</div>
</div>
<div class="cbtn-nav" id="nav-next">
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-wrap">
<div class="info-text"></div>
</div>
</div>

<script>
window.onload = function () {

  var canvas = document.createElement("canvas");
  var innerBtn = document.querySelector("#cbtn1 .cbtn-i");
  var outerBtn = document.getElementById("cbtn1");
  var nextBtn = document.getElementById("nav-next");
  var prevBtn = document.getElementById("nav-prev");
  var btnTitle = document.getElementById("cbtn-title");
  var tipText = document.querySelector(".info-wrap .info-text");
  outerBtn.appendChild(canvas);
  var ctx = canvas.getContext("2d");
  w = ctx.canvas.width = outerBtn.offsetWidth;
  h = ctx.canvas.height = outerBtn.offsetHeight;
  dots = [];
  hoverFlag = false;
  clickFlag = false;
  mode = 0;
  nt = 0;
  tip = 0;

  tips = [
  "Stepping up your hover effects game!",
  "The spacing/canvas area around the button can be easily adjusted via CSS margin.",
  "Tested in IE and on various mobile devices.",
  "No libraries required!",
  "Imagine the endless possibilities :)",
  "In this case there is only one Button which is being controlled via JS.",
  "Using a black background for the best contrast.",
  "More effects coming soon..."];


  modeSets = [
  {
    name: "Fireflies",
    maxDots: 75,
    maxSpeed: 3,
    minSpeed: 1,
    emitRate: 10,
    emitNum: 2,
    radius: 2,
    trail: 0.2,
    maxTime: 1500,
    minTime: 750,
    glow: 10,
    hueMin: 15,
    hueMax: 55 },

  {
    name: "Hyper Jump",
    maxDots: 100,
    maxSpeed: 3,
    minSpeed: 1,
    emitRate: 10,
    emitNum: 3,
    radius: 1.75,
    trail: 0.06,
    maxTime: 700,
    minTime: 300,
    glow: 7,
    hueMin: 170,
    hueMax: 230 },

  {
    name: "Focus",
    maxDots: 75,
    maxSpeed: 2,
    minSpeed: 0.5,
    emitRate: 10,
    emitNum: 2,
    radius: 7,
    trail: 1,
    maxTime: 1000,
    minTime: 500,
    glow: 0,
    hueMin: 60,
    hueMax: 130 },

  {
    name: "Vortex",
    maxDots: 150,
    maxSpeed: 2,
    minSpeed: -2,
    emitRate: 20,
    emitNum: 5,
    radius: 7,
    trail: 1,
    maxTime: 3000,
    minTime: 1500,
    glow: 0,
    hueMin: 260,
    hueMax: 330 },


  {
    name: "Code Red",
    maxDots: 50,
    maxSpeed: 1,
    minSpeed: 0.3,
    emitRate: 20,
    emitNum: 1,
    radius: 1.7,
    trail: 1,
    maxTime: 3000,
    minTime: 1500,
    glow: 10,
    hueMin: 0,
    hueMax: 10 }];



  function emitDots(x, y) {
    if (dots.length < modeSets[mode].maxDots) {
      for (var i = 0; i < modeSets[mode].emitNum; i++) {
        var color = Math.random() * (modeSets[mode].hueMax - modeSets[mode].hueMin) + modeSets[mode].hueMin;
        dots.push({
          x: w / 2,
          y: h / 2,
          v: Math.random() * (modeSets[mode].maxSpeed - modeSets[mode].minSpeed) + modeSets[mode].minSpeed,
          d: Math.random() * 360,
          c: Math.random() * (5 - -5) + -5,
          h: color,
          st: Date.now(),
          lt: Math.random() * (modeSets[mode].maxTime - modeSets[mode].minTime) + modeSets[mode].minTime });

      }
    }
  }

  function draw() {
    nt += 0.0005;
    ctx.fillStyle = "rgba(0,0,0," + modeSets[mode].trail + ")";
    ctx.fillRect(0, 0, w, h);
    ctx.fill();
    for (var i = 0; i < dots.length; i++) {
      var pct = (Date.now() - dots[i].st) / dots[i].lt;

      switch (mode) {
        case 0:
          ctx.save();
          ctx.beginPath();
          ctx.fillStyle = "hsla(" + dots[i].h + ", 100%, 60%, " + (1 - pct) + ")";
          ctx.shadowColor = "hsla(" + dots[i].h + ", 100%, 60%, 1)";
          ctx.shadowBlur = modeSets[mode].glow;
          ctx.arc(dots[i].x, dots[i].y, Math.pow(modeSets[mode].radius, 2) / dots[i].v, 0, Math.PI * 2);
          ctx.fill();
          ctx.closePath();
          ctx.restore();

          dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI / 180);
          dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI / 180);
          dots[i].d += dots[i].c;

          if (clickFlag)
          dots[i].v = 1;
          break;
        case 1:
          ctx.save();
          ctx.beginPath();
          ctx.fillStyle = "hsla(" + dots[i].h + ", 100%, 70%, " + (1 - pct) + ")";
          ctx.shadowColor = "hsla(" + dots[i].h + ", 100%, 70%, 1)";
          ctx.shadowBlur = modeSets[mode].glow;
          ctx.arc(dots[i].x, dots[i].y, Math.pow(modeSets[mode].radius, 2) / dots[i].v, 0, Math.PI * 2);
          ctx.fill();
          ctx.closePath();
          ctx.restore();

          dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI / 180);
          dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI / 180);
          if (clickFlag)
          dots[i].v = 3;
          break;
        case 2:
          ctx.save();
          ctx.beginPath();
          ctx.fillStyle = "hsla(" + dots[i].h + ", 100%, 70%, " + (1 - pct) + ")";
          ctx.shadowColor = "hsla(" + dots[i].h + ", 100%, 70%, 1)";
          ctx.shadowBlur = modeSets[mode].glow;
          ctx.arc(dots[i].x, dots[i].y, modeSets[mode].radius, 0, Math.PI * 2);
          ctx.fill();
          ctx.closePath();
          ctx.restore();

          dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI / 180);
          dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI / 180);
          if (clickFlag)
          dots[i].v = 0.3;
          break;
        case 3:
          ctx.save();
          ctx.beginPath();
          ctx.translate(w / 2, h / 2);
          ctx.rotate(dots[i].d * Math.PI / 180);
          ctx.fillStyle = "hsla(" + dots[i].h + ", 100%, 70%, " + pct + ")";
          ctx.shadowColor = "hsla(" + dots[i].h + ", 100%, 70%, 1)";
          ctx.shadowBlur = modeSets[mode].glow;
          ctx.rect(dots[i].x, dots[i].y, modeSets[mode].radius, modeSets[mode].radius);
          ctx.fill();
          ctx.closePath();
          ctx.restore();

          dots[i].x += dots[i].v;
          dots[i].y += dots[i].v;
          if (clickFlag)
          dots[i].v = 3;
          break;
        case 4:
          var sd = Math.pow(modeSets[mode].radius, 2) / dots[i].v;
          ctx.save();
          ctx.beginPath();
          ctx.strokeStyle = "hsla(" + dots[i].h + ", 100%, 50%, " + (1 - pct) + ")";
          ctx.shadowColor = "hsla(" + dots[i].h + ", 100%, 50%, 1)";
          ctx.shadowBlur = modeSets[mode].glow;
          if (clickFlag) {
            ctx.arc(dots[i].x, dots[i].y, sd, 0, Math.PI * 2);
          } else {
            ctx.rect(dots[i].x - sd, dots[i].y - sd, sd * 2, sd * 2);
          }
          ctx.stroke();
          ctx.closePath();
          ctx.restore();

          dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI / 180);
          dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI / 180);
          break;}


      if (dots[i].x > w || dots[i].x < 0 || dots[i].y > h || dots[i].y < 0 || dots[i].st + dots[i].lt < Date.now()) {
        dots.splice(i, 1);
      }
    }
    anim = requestAnimationFrame(draw);
  }

  innerBtn.onmouseover = function () {
    hoverFlag = true;
    emitter = setInterval(emitDots, modeSets[mode].emitRate);
    anim = requestAnimationFrame(draw);
  };

  innerBtn.onmouseout = function () {
    hoverFlag = false;
    clearInterval(emitter);
    cancelAnimationFrame(anim);
    ctx.clearRect(0, 0, w, h);
    dots = [];
  };

  innerBtn.onmousedown = function () {
    clickFlag = true;
  };

  innerBtn.onmouseup = function () {
    clickFlag = false;
  };

  btnTitle.innerHTML = modeSets[mode].name;

  nextBtn.onclick = function () {
    if (modeSets.length <= mode + 1) {
      mode = 0;
    } else {
      mode += 1;
    }

    setTimeout(function () {
      innerBtn.setAttribute("data-mode", mode);
      btnTitle.innerHTML = modeSets[mode].name;
    }, 300);

    outerBtn.classList.add("next_anim");
    btnTitle.classList.add("prev_anim");
    setTimeout(function () {
      outerBtn.classList.remove("next_anim");
      btnTitle.classList.remove("prev_anim");
    }, 600);
  };

  prevBtn.onclick = function () {
    if (0 > mode - 1) {
      mode = modeSets.length - 1;
    } else {
      mode -= 1;
    }

    setTimeout(function () {
      innerBtn.setAttribute("data-mode", mode);
      btnTitle.innerHTML = modeSets[mode].name;
    }, 300);

    outerBtn.classList.add("prev_anim");
    btnTitle.classList.add("next_anim");
    setTimeout(function () {
      outerBtn.classList.remove("prev_anim");
      btnTitle.classList.remove("next_anim");
    }, 600);
  };

  tipText.innerHTML = tips[tip];
  setInterval(function () {
    tips.length <= tip + 1 ? tip = 0 : tip += 1;
    tipText.innerHTML = tips[tip];
  }, 7000);

};
</script><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Generic Survey Form
2
Shrinking and enlarge loader animation
3
Spinner Loader with Customizable Text
4
Fading Trailer Circle Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2