JSFiddle - React, Tailwind, and code Playground
HTML
<a class="btn btn--primary btn--100">Jetzt kaufen</a>
<button class="btn btn--primary btn--50" type="submit">Absenden</button>
<input class="btn btn--secondary btn--150" type="submit" />
CSS
/* Basis-Klasse der Buttons */
.btn {
border-width: 1px;
border-style: solid;
border-radius: 4px;
}
/* Zustände der Buttons - hier wäre z. B. noch --inactive o. a. möglich */
.btn--primary {
background-color: #f00;
border-color: #d00;
color: #fff;
font-size: 16px;
}
.btn--secondary {
background-color: #ccc;
border-color: #888;
font-size: 12px;
}
/* Größe der Buttons - leicht erweiterbar durch Erweiterung der Zahlen */
.btn--50 {
padding: 4px;
}
.btn--100 {
padding: 8px;
}
.btn--150 {
padding: 16px;
}