Animated Buttons with JavaScript

I want to talk about a method which I use on buttons and it should be different from others by you. With this method, you will see a little animation on the buttons when they pressed on. I recommend you to see this article if you are bored with the fixed buttons.

The buttons could be fixed when some CSS codes applied on them. For example, the CSS codes below will disable the animation of which button got applied.

.button {
   background-color: #ccc;
   border-width: 2px;
   border-style: solid;
   border-color: #eee #999 #999 #eee;
}

But we can add a simple animation to button by the JavaScript code follows.

window.onload = function () {
   obj = document.getElementById('myButton');
   obj.onmousedown = function() { this.style.borderColor = '#999 #eee #eee #999'; };
   obj.onmouseup = function() { this.style.borderColor = '#eee #999 #999 #eee'; this.blur(); };
}

Now, we added a simple animation to myButton element. If you want to apply this method to all button elements on the page then you can use the JavaScript code below.

window.onload = function () {
   var buttons = document.getElementsByTagName('input'), i = 0, cur;
   while(i < buttons.length) {
      cur = buttons[i];
      if((/button|submit|reset/i).test(buttons[i].type)) {
         cur.onmousedown = function() { this.style.borderColor = '#999 #eee #eee #999'; };
         cur.onmouseup = function() { this.style.borderColor = '#eee #999 #999 #eee'; this.blur(); };
      }
      i++;
   }
}

After this action, all buttons get a simple animation and their animations could be seen when they pressed on.

Demo Page

Categories: CSS, JavaScript
Tags: animation, button, CSS, JavaScript