Tuesday, August 6, 2013

Svbtle Kudo button Copy

I have been fascinated by Svbtle Kudo button since I first saw it. Thus, my intuition was to try make one. Actually, the button has been done for some time. (I was on holiday and on holiday mood)

To try it out, go to:

I hacked most parts of the button, such as the size and positioning so that it looks perfect. I am not sure the reason behind some bugs if I didn't hack it, such as 1 px lines between the outer ring and the inner circle even when I have normalized the web page and clear all margin and padding of the two.

There are differences between the Svbtle real button and mine, though:
  1. Svbtle button has the inner circle even before the mouse cursor hovers in it while mine has none. I could do the same but I prefer no inner circle on initial state.
  2. Svbtle button has constant speed while my button has constant time. This means that for Svbtle button, if you move your cursor away from the button then put it in again before it returns to initial state, the time taken to make it finish is lesser than if it was from initial state to final state. For my button, it takes the same amount of time to go from any state to final state, thus slower animation if you move the cursor halfway then continue on.
  3. I didn't do the decoration, such as the "don't move" command and successful notice.

Note: It seems there is a lag for the Javascript online. It works fine locally.

No comments:

Post a Comment