Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code:
https://codepen.io/buoyantair/pen/JNgqXG?editors=1100
Let me share the snippets for Pug Script and Sass file:
Pug Script
header.row
.col
h1 Hover Buttons
p A small variation of buttions I made.
p Made by <a href="https://codepen.io/buoyantair">@buoyantair</a>
.row
button.btn Hello
button.btn-ghost World
button.btn-pill Cat
.row
button.btn-fall Kitty
button.btn-hang World
button.btn-wobble Cat
Sass file
=flex($direction, $position)
display: flex
flex-flow: $direction
justify-content: $position
...
// Animations
@keyframes pill
0%
left: 100%
100%
left: -100%
Noticing some oddities, particularly around the usage of selectors like button.btn ~ [class*="-fall"]. While this works for the first row, it behaves differently for the second row. Attempted alternative selector options like button[class*="-fall"] and [class*="-fall"], which performed as expected. Seeking guidance on why certain selectors are causing inconsistencies. Any insights or solutions would be greatly appreciated!