geen herhaling, opdeling van verantwoordelijkheden en BEM

slimmer.css

.knoppen {
    display: grid;
    grid-gap: 1em;
    grid-template-rows: repeat(auto-fill, 2em);
    width: 7em;
    margin: 0 .5em;
}
.knoppen--horizontaal {   
    width: 100%;         
    grid-template-columns: repeat(auto-fill, minmax(7em, auto));
}
.knop {
    background-color: darkcyan;
    text-decoration: none;
    text-align: center;
    display: block;            
    border-radius: .2em;
}
.knop:hover {
    background-color: forestgreen;
}
.knop__tekst {
    line-height: 2.45em;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: .8em;
}
.knop--annuleer {
    background-color: rgb(96, 96, 96);
}
.knop--annuleer:hover {
    background-color: rgb(34, 34, 34);
}