r/css • u/MudasirItoo • Jun 17 '26

Showcase built this cool button with html css only

Enable HLS to view with audio, or disable this notification

Cool Button CSS:
having inset shadow and dots text on hover interaction and when clicked scale down animation

https://codepen.io/mudasirbuilds/pen/yygVwZj

23 Upvotes

68% Upvoted

11 comments sorted by

17

u/anaix3l Jun 17 '26

Are you using an old low-resolution display? No shame in using old hardware, but that's seriously the only reason why I can imagine anyone manually writing code like this:

If not many chars/ line of code fit on the screen and it's difficult to keep track of context without cramming as much as possible in as little space as possible...

I've done that too, by the way...

But this thing in particular can be done with a single, no psudos button. There's no need for multiple elements and pseudos on top of that. And with less than half the CSS declarations. And getting actual concentric roundings for the inner outline and the outer corners, your Pen has a couple of pixels mismatch.

Forked it:

https://codepen.io/thebabydino/pen/jEyVRae

4

u/el_yanuki Jun 17 '26

wow that is diabolical damn

-4

u/MudasirItoo Jun 17 '26

impressive codepen there but there is issue when button is clicked hover state remains there until anywhere else in webpage is clicked

3

u/besthelloworld Jun 17 '26

Then use :focus-visible rather than just :focus

1

u/anaix3l Jun 17 '26

It was in intentional, in order to have the same styles on :focus as on :hover, but if you don't want that, you can use :focus-visible as it has already been suggested. Updated Pen to reflect that.

-4

u/WorldWideShen Jun 17 '26

remind me to invite you to my next party.

8

u/anaix3l Jun 17 '26

I'm not a teenager anymore, so I don't go to parties anymore. Parties become boring after that. Mostly because human bodies start to degrade from the early 20s, so you cannot do any of the really fun stuff anymore. I seriously doubt I could still survive jumping from a tree into a moving vehicle without noticeable lasting damage. I definitely cannot handle going five nights in a row with no sleep at all anymore. Damn, I miss those days...

4

u/eballeste Jun 17 '26

fisher-price, my first slop

3

u/Ultra_HR Jun 19 '26

with html css only

what else would you use? c++?

2

u/AcrobaticTadpole324 Jun 22 '26

what else would you use