Button mit Icons programmieren die man wiederverwenden kann

Ich sehe immer wieder Webdesigner die für jedes einzelne Element eigene CSS Codes schreiben und das macht dann das ganze CSS sehr gross. Es ist schade das viele gar nicht wissen, dass man CSS so aufbereiten kann, dass man einzelne Elemente mehrmals verwenden kann.

Heute zeige ich euch also einen Trick wie ihr einen Button schön sauer aufbauen könnt, so dass ihr ihn sehr einfach wiederverwenden knnt.

Video

Font Awesome

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

HTML

<div class="container">
    <button class="btn ok" type="button">
        <i class="fa-solid fa-floppy-disk"></i>
        <span>Sichern</span>
    </button>
   
    <button class="btn del" type="button">
        <i class="fa-solid fa-trash-can"></i>
        <span>Löschen</span>
    </button>
    </div>

CSS

.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn {
    --btn-color: #333333;
    --btn-bgcolor: #ddd;
    --btn-bg-hover: #ccc;

    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: var(--btn-bgcolor);
    color: var(--btn-color);

    outline: none;
    border: none; 

    border-radius: 10px;
    font-weight: 600;
    font-size: 40px;

    padding: 6px 12px;
}
.btn:hover, btn:active {
    background: var(--btn-bg-hover);
}

.ok {
    --btn-color: #fff;
    --btn-bgcolor: #3ebe53;
    --btn-bg-hover: #2b8548;  
}

.del {
    --btn-color: #fff;
    --btn-bgcolor: #ff0000;
    --btn-bg-hover: #b30000;  
}