From https://twitter.com/nealagarwal/status/1154059967781097473
Using the default mac cursor
A Pen by Aaron Iker on CodePen.
<a href="" class="btn">Call to action</a> | |
<!-- dribbble --> | |
<a class="dribbble" href="https://dribbble.com/aaroniker" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a> |
From https://twitter.com/nealagarwal/status/1154059967781097473
Using the default mac cursor
A Pen by Aaron Iker on CodePen.
$(document).ready(function() { | |
let container = $('body'), | |
element = $('.btn'); | |
let cursor = $('<div />').addClass('cursor').html('<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>').appendTo(container) | |
container.css('cursor', 'none'); | |
$(document).on('mousemove', e => { | |
cursor.toggle($(e.target).is(container)); | |
cursor.css({ | |
'--x': e.pageX + 'px', | |
'--y': e.pageY + 'px', | |
'--r': calculateRotate(cursor, element) + 20 + 'deg' | |
}); | |
}); | |
container.on('mouseleave', e => { | |
cursor.hide(); | |
}); | |
function calculateRotate(elem, to) { | |
let offset = elem.offset(), | |
toOffset = to.offset(), | |
center = { | |
x: offset.left + elem.outerWidth() / 2, | |
y: offset.top + elem.outerHeight() / 2 | |
}, | |
toCenter = { | |
x: toOffset.left + to.outerWidth() / 2, | |
y: toOffset.top + to.outerHeight() / 2 | |
}, | |
radians = Math.atan2(toCenter.x - center.x, toCenter.y - center.y), | |
degree = (radians * (180 / Math.PI) * -1) + 180; | |
return degree; | |
} | |
element.click(e => { | |
return false; | |
}) | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
.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)); | |
svg { | |
display: block; | |
width: 28px; | |
height: 28px; | |
transform: rotate(var(--r)); | |
} | |
} | |
.btn { | |
--background: #5628EE; | |
--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 var(--shadow); | |
transform: translateY(var(--y)); | |
transition: box-shadow .3s ease, transform .3s ease; | |
&:hover { | |
--y: -2px; | |
box-shadow: 0 8px 16px var(--shadow); | |
} | |
&:active { | |
--y: 1px; | |
box-shadow: 0 4px 8px var(--shadow); | |
} | |
} | |
html { | |
box-sizing: border-box; | |
-webkit-font-smoothing: antialiased; | |
} | |
* { | |
box-sizing: inherit; | |
&:before, | |
&:after { | |
box-sizing: inherit; | |
} | |
} | |
// Center & dribbble | |
body { | |
min-height: 100vh; | |
font-family: Roboto, Arial; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: #F5F9FF; | |
.dribbble { | |
position: fixed; | |
display: block; | |
right: 20px; | |
bottom: 20px; | |
img { | |
display: block; | |
height: 28px; | |
} | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" rel="stylesheet" /> |