<button type="button" class="button button--gradient">
    gradient
</button>
{{> @button modifier="button--gradient" }}
{
  "text": "gradient"
}
  • Content:
    /*
     * Element: Buttons
     */
    
    /* Setting document variables*/
    :root {
        --button-color-primary: var(--color-primary);
        --button-color-gradient-second-color: #dc4e81;
        --button-color-text: var(--color-white);
        --button-font-family: var(--base-font-family);
        --button-font-size: var(--base-font-size);
    }
    
    /* Default button*/
    
    .button {
        cursor: pointer;
        background-image: none;
        /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214*/
        background-color: var(--button-color-primary);
        position: relative;
        font-weight: 600;
        font-family: var(--button-font-family);
        font-size: 16px;
        transition: background 0.3s, color 0.3s, border-color 0.3s;
        color: var(--button-color-text);
        border: 1px solid transparent;
        text-decoration: none;
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        display: inline-block;
        white-space: nowrap;
        text-align: center;
        z-index: 100;
    
        &:hover,
        &:focus {
            color: var(--button-color-text);
            background: shade(var(--button-color-primary), 10%);
            outline: none;
        }
    
        &[disabled],
        [disabled] & {
            cursor: not-allowed;
        }
    
        /* Large button */
        &--large {
            height: 50px;
            line-height: 50px;
            padding: 0 40px;
            font-size: 1.5em;
        }
    
        /* Ghost button*/
        &--ghost {
            color: var(--button-color-primary);
            border: solid 1px var(--button-color-primary);
            background-color: transparent;
    
            &:hover,
            &:focus {
                color: var(--button-color-text);
                background-color: var(--button-color-primary);
            }
        }
    
        &--scale {
            background-color: transparent;
            border: 1px solid var(--button-color-primary);
            will-change: transform;
            overflow: hidden;
    
            &:before {
                content: '';
                position: absolute;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: var(--button-color-primary);
                opacity: 1;
                transition: 0.4s;
                z-index: -1;
            }
    
            &:hover {
                &:before {
                    transform: scale(0);
                    opacity: 0;
                }
            }
        }
    
        &--leftright {
            background-color: transparent;
            border: 1px solid var(--button-color-primary);
            will-change: transform;
            overflow: hidden;
    
            &:before {
                content: '';
                position: absolute;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: var(--button-color-primary);
                transition: 0.4s;
                z-index: -1;
            }
    
            &:hover {
                &:before {
                    transform: translateX(100%);
                }
            }
        }
    
        &--topbottom {
            background-color: transparent;
            border: 1px solid var(--button-color-primary);
            will-change: transform;
            overflow: hidden;
    
            &:before {
                content: '';
                position: absolute;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: var(--button-color-primary);
                transition: 0.2s;
                z-index: -1;
            }
    
            &:hover {
                &:before {
                    transform: translateY(100%);
                }
            }
        }
    
        &--gradient {
            background-color: transparent;
            border: 1px solid transparent;
            will-change: transform;
            overflow: hidden;
    
            &:before {
                content: '';
                position: absolute;
                left: 0;
                height: 100%;
                width: 100%;
                background-image: linear-gradient(89deg, var(--button-color-primary) 0, var(--button-color-gradient-second-color) 52%, var(--button-color-primary));
                background-size: 200% auto;
                transition: 0.6s;
                z-index: -1;
            }
    
            &:hover {
                &:before {
                    background-position: right center;
                }
            }
        }
    }
  • URL: /components/raw/button/button.css
  • Filesystem Path: src/01-atoms/buttons/button/button.css
  • Size: 4.1 KB

There are no notes for this item.