Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created October 7, 2019 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/f9e30973e003cc3f0bc02d806a6e9d77 to your computer and use it in GitHub Desktop.
Save CodeMyUI/f9e30973e003cc3f0bc02d806a6e9d77 to your computer and use it in GitHub Desktop.
Mouse cursor pointing to cta
<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>
$(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;amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment