Кнопки–вырвиглазки

Да

by Uncle Bens

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<button >НАЖМИ МЕНЯ ПОЛНОСТЬЮ, Я НЕСНОСНАЯ КНОПКА</button>
<button class="apply">ПРИНЯТЬ</button>
<button class="cancel">ОТМЕНИТЬ</button>

CSS

/* Generated by less 2.5.1 */
* {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
section {
  width: 40%;
  margin: 0 auto;
  padding: 20px;
}
.content h1 {
  font-size: 72px;
  color: white;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.25), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.content p {
  color: #333333;
  margin-bottom: 10px;
}
button {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 10px;
  outline: none;
  border: 2px solid #f7224b;
  background: none;
  box-shadow: 2px 2px 0 0 white, 4px 4px 0 0 #2227f7, inset 2px 2px 0 0 white, inset 4px 4px 0 0 #2227f7;
  text-shadow: 0 0 0 #f7224b;
  padding: 10px;
  font-weight: bold;
  color: #2227f7;
}
button:hover {
  cursor: pointer;
  border: 2px solid #2227f7;
  box-shadow: 4px 4px 0 0 white, 6px 6px 0 0 #f7224b, inset 4px 4px 0 0 white, inset 6px 6px 0 0 #f7224b;
  background-color: #2227f7;
  color: white;
  text-shadow: 2px 2px 0 #f7224b;
}
button:active {
  top: 4px;
  left: 4px;
  box-shadow: 0px 0px 0 0 white, 2px 2px 0 0 #f7224b, inset 0px 0px 0 0 white, inset 2px 2px 0 0 #f7224b;
}
.apply {
  border: 2px solid green;
  background: none;
  box-shadow: 2px 2px 0 0 white, 4px 4px 0 0 green, inset 2px 2px 0 0 white, inset 4px 4px 0 0 green;
  text-shadow: 0 0 0 #f7224b;
  color: green;
}
.apply:hover {
  border: 2px solid green;
  box-shadow: 4px 4px 0 0 white, 6px 6px 0 0 green, inset 4px 4px 0 0 white, inset 6px 6px 0 0 green;
  background-color: green;
  color: white;
  text-shadow: 2px 2px 0 #2227f7;
}
.apply:active {
  top: 4px;
  left: 4px;
  box-shadow: 0px 0px 0 0 white, 2px 2px 0 0 #f7224b, inset 0px 0px 0 0 white, inset 2px 2px 0 0 #f7224b;
}
.cancel {
  border: 2px solid red;
  background: none;
  box-shadow: 2px 2px 0 0 white, 4px 4px 0 0 red, inset 2px 2px 0 0 white, inset 4px 4px 0 0 red;
  text-shadow: 0 0 0 #f7224b;
  color:...