#bouncy buttons
strong sorrel
heres a funny you can still make the servers bounce on desktop
button,
[role="button"],
a[href^='/channels'],
[aria-label="Servers"] [class^=listItem]:hover {
filter: brightness(0.95); scale: 0.95;
}
button,
[role="button"],
a[href^='/channels'],
[aria-label="Servers"] [class^=listItem]:active {
filter: brightness(0.9); scale: 1.05;
}
button,
[role="button"],
a[href^='/channels'],
[aria-label="Servers"] [class^=listItem] {
transition: scale 0.6s cubic-bezier(0.34, 5, 0.64, 1);
}
``` that exceeds my two minutes of messing with snippets
maiden tinsel
That only applies to servers.
You need :is() around everything before :hover
stray ginkgo
if you hover over two buttons back and forth you can "build up charge" and make them fucking massive. not a bug, a feature
strong sorrel
a
hard flame
button:hover,
[role="button"]:hover,
.content__23cab > li:hover,
[aria-label="Servers"]
[class^=listItem]:hover {
filter: brightness(0.95); scale: 0.95;
}
button:active,
[role="button"]:active,
.content__23cab > li:acitve,
[aria-label="Servers"]
[class^=listItem]:active {
filter: brightness(0.9); scale: 1.05;
}
button,
[role="button"],
.content__23cab > li,
[aria-label="Servers"]
[class^=listItem] {
transition: scale 0.6s cubic-bezier(0.34, 5, 0.64, 1);
}
``` makes the channels, servers & buttons bounce on desktop
median kayak
if you hover over two buttons back and forth you can "build up charge" and make ...
lmao this is so fun
drowsy oxide
this needs to be a js snippet so there can be bouncy sound effects too
rotund fable
the buttons can get crazy huge if you click in just the right rythm
its fun to do lmao
maiden tinsel
I am glad this snippet gave people joy
I made the effect for my own website, and decided to spend 3 minutes putting it in discord and intensified the animation a bit
if you want it to be reasonable just lower X in cubic-bezier(0.34, X, 0.64, 1)
1.56 is the most reasonable while still noticeable
indigo depot
.embedWrapper_c143d9:hover {
filter: brightness(0.95); scale: 0.95;
transform: rotate(0.5deg);
}
.embedWrapper_c143d9 {
transition: 0.6s cubic-bezier(0.34, 2.5, 0.32, 0.5);
}
bouncy images
green cosmos
should work anywhere:
https://caniuse.com/css-nesting
maiden tinsel
Believe it or not, discord doesn't use the most up to date electron
green cosmos
Believe it or not, discord doesn't use the most up to date electron
yeah just checked and its using chrome 108 💀
which came out nov 2022
indigo depot
won't it have some vulnerabilities then
maiden tinsel
Sounds like a good reason to use vesktop instead :p