Just hover the buttons!
I have to be honest: most hypes come and go. The frosted glass look that currently seems to be the "must have" will fade as well. Additionally, whether it is the accessibility and the contrast-issues or the --- never mind, I just hovered the button and I love it!
I imagine I am not the only one with that experience. I decided to create a little CSS template so you can hover the buttons as well. Joke aside, the template is built on Gaudiamus CSS and therefore allows very easy adoption to whatever corporate identity you need to adhere to. If you like it, don't forget to leave me a star on GitHub:
gaudiamus-css
/
glass
template / demo of a gaudiamus design
Glass
Very simple gaudiamus example to build on top of.
Use it:
- fork this repository
- clone & enjoy
Requirements
- SASS (dartSass, as libSASS is deprecated and does not support some used features)
First steps
The file style/_variables.scss is a good starting point.
It includes common Gaudiamus variables and controls values like
colors, breakpoints etc.
Files
_buttons.scss
Handles button & icon behavior
_card.scss
Handles card glassmorphism
_effects.scss
Masking, clipping & scrollbar
_form
HTML form elements (input, textarea, select, checkbox)
_menu
Navbar & mobile menu
_variables
SCSS-variables
style.scss
Main stylesheet & font setup
components/toggle.js
VanillaJS toggle e.g. for menu behavior. Should work nicely with all frameworks.
Top comments (0)