hashfx

About hashfx

hashfx is an animated CSS button by @hashfx. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>hashfx</title>
    <script src="script.js"></script>
</head>

<body>
    <a href="" class="btn">Point me! 😎</a>

</body>

</html>

.cursor {
    --r: 0deg;
    position: fixed;
    left: -8px;
    top: -6px;
    pointer-events: none;
    user-select: none;
    display: none;
    transform: translate(var(--x), var(--y));
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
}
.cursor svg {
    display: block;
    width: 28px;
    height: 28px;
    transform: rotate(var(--r));
}
.btn {
    --background: #13c4db;
    --shadow: rgba(84, 40, 238, .16);
    --y: 0;
    display: table;
    text-align: center;
    padding: 12px 24px;
    border-radius: 4px;
    color: #fff;
    background: var(--background);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    backface-visibility: hidden;
    box-shadow: 0 4px 12px rgba(84, 40, 238, .16);
    transform: translateY(var(--y));
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn:hover {
    --y: -2px;
    box-shadow: 0 8px 16px rgba(84, 40, 238, .16);
}
.btn:active {
    --y: 1px;
    box-shadow: 0 4px 8px rgba(84, 40, 238, .16);
}
html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
* {
    box-sizing: inherit;
}
*:before, *:after {
    box-sizing: inherit;
}
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f9ff;
}

document.addEventListener('DOMContentLoaded', function () {
    var container = document.querySelector('body');
    var element = document.querySelector('.btn');

    var cursor = document.createElement('div');
    cursor.classList.add('cursor');
    cursor.innerHTML = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><polygon fill="#FFFFFF" points="8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 "/><polygon fill="#FFFFFF" points="17.3,21.6 13.7,23.1 9,12 12.7,10.5 "/><rect x="12.5" y="13.6" transform="matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)" width="2" height="8"/><polygon points="9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 "/></svg>';
    container.appendChild(cursor);

    container.style.cursor = 'none';

    document.addEventListener('mousemove', function (e) {
        cursor.style.display = e.target === container ? 'block' : 'none';
        cursor.style.setProperty('--x', e.pageX + 'px');
        cursor.style.setProperty('--y', e.pageY + 'px');
        cursor.style.setProperty('--r', calculateRotate(cursor, element) + 20 + 'deg');
    });

    container.addEventListener('mouseleave', function () {
        cursor.style.display = 'none';
    });

    function calculateRotate(elem, to) {
        var offset = elem.getBoundingClientRect();
        var toOffset = to.getBoundingClientRect();
        var center = {
            x: offset.left + elem.offsetWidth / 2,
            y: offset.top + elem.offsetHeight / 2
        };
        var toCenter = {
            x: toOffset.left + to.offsetWidth / 2,
            y: toOffset.top + to.offsetHeight / 2
        };
        var radians = Math.atan2(toCenter.x - center.x, toCenter.y - center.y);
        var degree = (radians * (180 / Math.PI) * -1) + 180;
        return degree;
    }

    element.addEventListener('click', function (e) {
        e.preventDefault();
        return false;
    });
});