Mobile game-style buttons

by Emanuele del Grande

HTML

<div class="logo">
    <span>CSS</span> <span>MobileButtons</span>
    <div>CSS animation for gamish buttons</div>
</div>

<p>
Taking the cue from games such as Clash Royale, I am working to a style suitable for mobile-friendly sites which evocate a gamish atmosphere.<br />
The animation effect is associated to the <em>active</em> state instead of the <em>hover</em> state, favouring the experience on mobile devices.
</p>

<div class="btn-box">
  <input type="button" class="btn" value="DISABLE" />
  <input type="button" class="btn" value="CLEAR CACHE" />
  <input type="button" class="btn" value="UNINSTALL" />
</div>

<p>
The button says: "click me many times and I will vibrate like a jelly candy!"
</p>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }


/* BUTTON STYLES */
.btn-box { text-align: center; margin: 0 auto; padding: 20px 0; font-size: 0; }
.btn {
  display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;
  height: 40px; margin: 0.4em; padding: 0 15px;
  border: 1px solid #0095ff; border-bottom: 2px solid rgba(0,0,0,0.2);
  border-radius: 3px; font: 16px var(--font-family); line-height: 40px;
  font-weight: 700; letter-spacing: -0.5px; text-decoration: none; outline: none;
  background: #33bbff; color: #444;
  box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.4);
  text-shadow: 0px 1px 2px rgba(255,255,255,0.7);
  background-clip: text;
  cursor: pointer;
  animation: pulse-out 0.2s ease-in-out 1;
  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select:...