Hoe een knop in een topic post in te voegen

Ontwikkelaar
6

Snelle CSS-verbetering van onze kant:

Aangezien de HTML-uitvoer iets anders is binnen een “cooked post” voor “wrap-buttons”, hebben we de CSS-markup aangepast, aangezien de a-tag binnen de div > p-hiërarchie de link bevat en daardoor het klikken op de knop net boven of onder de link de link niet activeert.

We hebben dit kunnen omzeilen om meer padding rond de a-tag toe te voegen en de margin-block-markup van de <p>-tag te overschrijven.

Ook moest de linkkleur worden aangepast.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}