swishflo
The swishflo effect simulates 3-dimensional depression of a glossy button using a background javascript to manipulate the button's background-image (a radial gradient). Swishflo adds a nice clean touch to any clickable object. Use it on blog tags, block links, navbar links, and so forth. Simply copy and paste the following code
<script src="https://mikjakrych.github.io/swishflo/swishflo.js" charset="utf-8"></script>
into your document and use the swishflo class on any object that you want
to apply swishflo to. For instance,
<a href="javascript:myFunction()" class="swishflo">
click me
</a>
<script>
function myFunction(){
console.log("swishflo is exciting");
}
</script>
Here are a few nice swishflo features:
-
swishflo can be applied to any element not just
<button>elements - swishflo has been tested thoroughly and works on Chrome, Edge, IE, and Firefox
- swishflo can handle links to other sites, links to anchors within the page, links that run javascript, and so on
- swishflo can be used on elements of all positions, including fixed
-
swisflo highlight color can be changed by using the
initializeSwishflo(r,g,b)function (this function will also look again for swishflo objects) - swishflo delays the button's action so that users can enjoy the feature before moving on
- swishflo can be used anywhere free of charge
Check out swishflo in the following example: