<div class="button purple radius">Hola mundo</div>
body {
  display: grid;
  min-height: 100vh;
  align-content: center;
  justify-content: center;
}

.button {
  --padding: 1em;
  --color: red;
  display: inline-block;
  font-size: 4em;
  padding: var(--padding) calc(var(--padding) * 2);
  background: var(--color);
  border-radius: calc(var(--padding) / 2);
  color: #fff;
}

.blue {
  --color: blue;
}

.green {
  --color: green;
}

.purple {
  --color: purple;
}

.round {
  border-radius: calc(var(--padding) * 2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.