Additional blocks for Berry CSS, Albireo CMS and MF-template

Link    




<p><a class="button" _href="">Link</a> &nbsp;&nbsp;&nbsp; <button class="button" type="button">Button</button></p>

<hr>

<div class="b-flex flex-wrap gap30">
    <div class="bg-primary700 pad20"><button class="button" type="button">.button</button></div>
    <div class="bg-primary700 pad20"><button class="button" type="button" disabled>disabled</button></div>
    <div class="bg-primary700 pad20"><button class="button button-outline1" type="button">.button-outline1</button></div>
    <div class="bg-primary700 pad20"><button class="button button-outline2" type="button">.button-outline2</button></div>
</div>

<br>

<div class="b-flex flex-wrap gap30">
    <button class="button button-red" type="button">.button-red</button>
    <button class="button button-brown" type="button">.button-brown</button>
    <button class="button button-orange" type="button">.button-orange</button>
    <button class="button button-yellow" type="button">.button-yellow</button>
    <button class="button button-lime" type="button">.button-lime</button>
    <button class="button button-green" type="button">.button-green</button>
    <button class="button button-teal" type="button">.button-teal</button>
    <button class="button button-cyan" type="button">.button-cyan</button>
    <button class="button button-blue" type="button">.button-blue</button>
    <button class="button button-indigo" type="button">.button-indigo</button>
    <button class="button button-violet" type="button">.button-violet</button>
    <button class="button button-purple" type="button">.button-purple</button>
    <button class="button button-pink" type="button">.button-pink</button>
    <button class="button button-gray" type="button">.button-gray</button>
</div>

<hr>

<!-- nosimple -->
<button class="button" style="
    --button-bg-color: var(--red600);
    --button-text-color: var(--red100);
    --button-radius: 10px;
    --button-border: 3px solid var(--red200);

    --button-hover-bg-color: var(--red700);
    --button-hover-text-color: var(--yellow500);

    --button-focus-bg-color: var(--red400);
    --button-focus-text-color: var(--white);
    --button-focus-border: 3px solid var(--red600);
    --button-focus-shadow: 0 0 0 2px var(--red200);
">Download</button>
<!-- /nosimple -->

MaxSite.org © 2006-2026