Play Pill Button
A yellow game-style PLAY pill with a little green blob that pops up from the bottom edge when you hover.
Preview and code
index.html
<button class="play" type="button"><span class="play__pal" aria-hidden="true"><span class="play__eye"></span><span class="play__eye"></span></span><span class="play__label">Play</span></button>
styles.css
.play{position:relative;display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px 0 10px;border:2px solid #000;border-radius:999px;background:#ffd633;color:#fff;font:800 19px/1 system-ui,Roboto,sans-serif;letter-spacing:1px;text-transform:uppercase;text-shadow:2px 2px 0 #747474;overflow:hidden;cursor:pointer;transition:transform .15s ease}
.play__pal{position:relative;flex:none;align-self:flex-end;width:34px;height:34px;margin-bottom:-16px;border:2px solid #0b3b2e;border-radius:50% 50% 38% 38%;background:#3ddc97;box-shadow:inset -4px -3px 0 rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.play__eye{position:absolute;top:9px;width:6px;height:9px;border-radius:50%;background:#0b3b2e}
.play__eye:first-child{left:7px}
.play__eye:last-child{right:7px}
.play:hover .play__pal,.play:focus-visible .play__pal{transform:translateY(-14px) rotate(-10deg)}
.play:active{transform:scale(.97)}
.play:focus-visible{outline:3px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.play,.play__pal{transition:none}}About
A bold pill with a hard black outline, white uppercase label and a grey drop shadow on the text. The green blob is an original mini character drawn with CSS only: it hides below the bottom edge and bounces up with a small tilt on hover or keyboard focus. The button shrinks slightly when pressed.