Using Funky Buttons to Attract and Keep Interest in Your Site

Every web designer is inclined to get their brand to stand out stylistically, so there will always be a drive to avoid mimicking the stock design styles that many established competitors use for their websites. It can perhaps be said that websites that can afford to look less "professional" on account of dealing in content that is not important or weighty enough to affect the customer's state of health or security have more room to deviate from professionally accepted standards.

Websites that are intended to sustain a company's business will usually stick with having somewhat fancy but otherwise "normal-looking" buttons at the forefronts of their user interfaces. If the website is trying to maintain a tone that would respect the potential customers of its necessary service, then these buttons would avoid having outlandish effects take place whenever the user interacts with them.

An example of a button that goes out of its way to appear like what one might expect to see in child-oriented media or a teenage sitcom from the nineties, however, is uploaded to jsfiddle.net. This website is an "online playground" much like codepen.io in that the user can interact with a digital exhibit, observe the contents of the HTML, CSS, and JavaScript files responsible for creating the effect, and even modify said contents to observe how the exhibit changes.

The exhibit portrays what the author refers to as a "funky button," in which a simple white quadrilateral vaguely shifts the relative positions of each of its four corners whenever it is reloaded. There is no function in place to have the button react when the user clicks on it; however, while the user's cursor hovers over the button in question, each of these four corners changes its position at a regular pace. Through "transform" effects present in the CSS file, the current shape of the button dynamically casts a "drop shadow" on the background. Both the drop shadow and the main button itself slightly increase in scale while the user's cursor hovers over it because of "scale" parameters that are also present in the "transform" functions used. For more information click here https://i.imgur.com/RhForPD.gif.