Component Library

Link Button: Ghost 

<a href="#" title="Link Button title" class="link-button   " property="url">Link Button</a>
 
{{> @link-button modifer="button--ghost" }}
 
{
  "url": "#",
  "title": "Link Button title",
  "text": "Link Button"
}
  • Content: 
    /*
 * Element: Link Buttons
 */

/*Setting document variables*/
:root {
    --link-button-color-primary: var(--color-primary);
    --link-button-color-white: var(--color-white);
    --link-button-color-text: var(--color-text);
    --link-button-base-font-family: var(--base-font-family);
}


/* Default button*/
.link-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-image: none;
    /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214*/
    background-color: var(--link-button-color-primary);
    font-weight: 600;
    font-family: var(--link-button-base-font-family);
    font-size: 14px;
    transition: background .3s, color .3s, border-color .3s;
    color: var(--link-button-color-white);
    border: 1px solid transparent);
    text-decoration: none;
    border-radius: 4px;
    line-height: 40px;
    padding: 0 20px;

    &:hover,
    &:focus {
        color: var(--link-button-color-white);
        background: shade(var(--link-button-color-primary), 10%);
        text-decoration: none;
        outline: none;
    }


    &[disabled],
    [disabled] & {
        cursor: not-allowed;
    }

    /* Ghost button*/
    &--ghost {
        color: var(--link-button-color-text);
        border: solid 1px var(--link-button-color-primary);
        background-color: transparent;

        &:hover,
        &:focus {
            color: var(--link-button-color-white);
            background-color: var(--link-button-color-primary);
        }
    }
}
  • URL: /components/raw/link-button/link-button.css
  • Filesystem Path: src/01-atoms/links/link-button/link-button.css
  • Size: 1.6 KB

There are no notes for this item.