loading...
Cover image for This is probably the funniest Codepen I found this year!

This is probably the funniest Codepen I found this year!

simonholdorf profile image Simon Holdorf ・1 min read

This is rather a short post but I find this codepen by Bård N Hovde so awesome that I must share it with you:

Amazing what you can do with JavaScript and CSS, agree?

Please leave a comment if you like this as well or managed to hit the button. Also don't forget to follow me here and on Twitter for more upcoming posts!

Discussion

pic
Editor guide
Collapse
chrisachard profile image
Chris Achard

Ha, I saw this other day - it's fantastic :)

For anyone looking in the code for the 'trick' (of hiding the mouse), it's done by setting the cursor in JS on this line:

const screenStyle = cursorGrabbed ? { cursor: "none" } : {};

and then the fake mouse pointer is part of the hand graphic. Brilliant!

Collapse
savagepixie profile image
SavagePixie

Oh, so there is a cursor trick! I've seen it on my mobile, where you can obviously just tap on things, so I hadn't caught on this feature.

Collapse
sanjaysupanch profile image
Collapse
xtrp profile image
Gabriel Romualdo

Pretty fun, with a combination of fast mouse movements and right-click trickery, I managed to produce a waving hand without changing any of the code.

Waving Hand Demo

— Gabriel

Collapse
pepas24 profile image
Sebastian Gutierrez

I just pass the mouse very close to the bottom of page hahaha

Collapse
fultonbrowne profile image
Fulton Browne

that worked for me

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

But you won't be able to press the Button 😁.

Collapse
sunilkrsingh profile image
Sunil Kumar Singh

Button is not pressable anyway.

Thread Thread
hndcrftd profile image
Jakob Wildrain

Yes, it is! Click on the text above the button (to gain focus) and use TAB to select the button, now press SPACE or ENTER. You have pressed the button and it changes the caption to "Nice one".
While it is technically not "clickable", it is indeed "pressable", to use your own word ;)

Thread Thread
sunilkrsingh profile image
Sunil Kumar Singh

Haha! Nice. Thanks for kind information.

Collapse
amruthpillai profile image
Amruth Pillai

Brilliant use of CSS and logic. Had so much fun playing around with this.
And using the Chrome Dev Console, clicked the button using Javascript, this was the result.
Cool that the dev included that as well :)

Nice One!

Collapse
salvan13 profile image
Antonio Salvati 🦊

or focus it pressing tab :)

Collapse
darksmile92 profile image
Robin Kretzschmar

That... was awesome! It really made me laugh loud in the office 👍🤣
Thanks for sharing this!

Collapse
simonholdorf profile image
Simon Holdorf Author

You're welcome 😄

Collapse
rcoundon profile image
Ross Coundon

Love it, very clever :-D

Collapse
xeusteerapat profile image
Collapse
corbee profile image
Illia Pyshniak

If you press the button and then give your cursor to bottom buddy...

Collapse
kdraypole profile image
Kobe Raypole

This made me laugh, yet oddly frustrated at the same time.

Collapse
siddrc profile image
Collapse
giogiordano93 profile image
Giovanni Giordano

Passing by the bottom-left corner you can go on the button :D

Collapse
waqarhusain profile image
Collapse
bl4met profile image
JD Taft

The most fun I had with this was keeping the pointer just out of reach. This probably says more about me than I'd rather admit. 🤣

Collapse
awwsmm profile image
Andrew (he/him)

That's awesome!

Collapse
simonholdorf profile image
Collapse
ehsan profile image
Ehsan Azizi

That was fantastic!

Collapse
ekimlim122104 profile image
Mike Lim

hoho that's awesome dudeeeeee

Collapse
thomasbnt profile image
Collapse
camicode profile image
CamCode

Amazing!!! I like the "effect" on button :)

Collapse
5anthosh profile image
Santhosh Kumar

hahah, clever!

Collapse
michaelandreuzza profile image
michael-andreuzza

duuude ! I peed myself. how cools is this damn it.

Collapse
eddieaich profile image
Eddie Aich

Amazing! I needed this today. TY

Collapse
vagoel profile image
Varun

Brilliant skills and imagination.

Collapse
castroalves profile image
Cadu de Castro Alves

That's very funny!

Collapse
tolgahanuzun profile image
Tolgahan ÜZÜN

heheh 😅 it's funny

Collapse
gherciu profile image
Collapse
gabmen1711 profile image
gabmen1711

Hahahaha awesome!

Collapse
staceyluvstech profile image
Collapse
dillionmegida profile image
Dillion Megida

Was able to click the button on mobile though 🙂

Collapse
lautarolobo profile image
Lautaro Lobo

Yeah funny af, my mom (not really a techy person) ended up LOL

Collapse
kleene1 profile image
kleene1

😄👏

Collapse
techgirl007 profile image
TechGirl007

That is so cool! I am going to give that a go ~ if you don't mind! Well Done!

Collapse
jarodpeachey profile image
Jarod Peachey

Am I the only one who keeps trying to press the button? Like, i've been at it for 10 minutes? 😂

Collapse
negue profile image
negue

Hehe quite awesome!

Collapse
clarkchiu profile image
Clark Chiu

Ha Ha Ha, nice codepen.

Collapse
brettward1994 profile image
Mr.Ward

Haha. This had me rolling! I love seeing creative stuff like this.

Collapse
sunilkrsingh profile image
Sunil Kumar Singh

When i first saw it, i was like "Dude! Something just happened!". Thanks for sharing.

Collapse
dechamp profile image
DeChamp

seriously love this! Thanks for the share.

Collapse
simonholdorf profile image
Simon Holdorf Author

Sure thing 😄

Collapse
axelledrouge profile image
AxelleDRouge

ha so funny, thanks for the share that made my day

Collapse
jlapitan profile image
Joell Lapitan

I caught the button by using the Tab :)

I remember doing this same trick before with Visual Basic 6, more than a decade ago :)

Collapse
ekimlim122104 profile image
Mike Lim

hahaha very funny _^

Collapse
fultonbrowne profile image
Fulton Browne

This is amazing

Collapse
shadowwarior5 profile image
Collapse
naveenkharwar profile image
Naveen Kharwar

hahaha cool

Collapse
timkovik profile image
Collapse
silampawar profile image
SamP

This is so cool! Loved it.

Collapse
gitdemon profile image
Angel Centeno

This is hilarious! I had to share it with my team.

Collapse
mnabeelp profile image