University of Derby

Style Guide: Call to Action Buttons 

<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Button links - giant</span>
<p>
    <a href="#" class="button-yellow button-giant" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-blue button-giant" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-outline button-giant" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-black button-giant" role="button" tabindex="0" data-scroll>
        Apply
    <i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
                        Apply
            <i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
<span class="label">Button links - large</span>
<p>
    <a href="#" class="button-yellow button-large" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-blue button-large" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-outline button-large" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-black button-large" role="button" tabindex="0" data-scroll>
        Apply
    <i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
                        Apply
            <i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>

<span class="label">Button links - default</span>
<p>
    <a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-blue" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-black" role="button" tabindex="0" data-scroll>
        Apply
    <i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
                        Apply
            <i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>

<span class="label">Button links - small</span>
<p>
    <a href="#" class="button-yellow button-small" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-blue button-small" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-outline button-small" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a> <a href="#" class="button-black button-small" role="button" tabindex="0" data-scroll>
        Apply
    <i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
                        Apply
            <i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>

<span class="label">Button links - with obnoxiously large labels</span>
<p>
    <a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
        Book an open day with obnoxiously large labels
            <span class="button-overlay"><span>
                        Book an open day with obnoxiously large labels
                    </span></span></a> <a href="#" class="button-blue" role="button" tabindex="0" data-scroll>
        Book an open day with obnoxiously large labels
            <span class="button-overlay"><span>
                        Book an open day with obnoxiously large labels
                    </span></span></a> <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
        Book an open day with obnoxiously large labels
            <span class="button-overlay"><span>
                        Book an open day with obnoxiously large labels
                    </span></span></a> <a href="#" class="button-black" role="button" tabindex="0" data-scroll>
        Apply with obnoxiously large labels
    <i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
                        Apply with obnoxiously large labels
            <i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
 
<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Button links - giant</span>
<p>
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'giant',
        scheme: 'yellow'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'giant',
        scheme: 'blue'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'giant'
    } %}
    {% include '@button' with {
        label: 'Apply',
        href: '#',
        size: 'giant',
        external: true,
        scheme: 'black'
    } %}
</p>
<span class="label">Button links - large</span>
<p>
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'large',
        scheme: 'yellow'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'large',
        scheme: 'blue'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'large'
    } %}
    {% include '@button' with {
        label: 'Apply',
        href: '#',
        size: 'large',
        external: true,
        scheme: 'black'
    } %}
</p>

<span class="label">Button links - default</span>
<p>
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        scheme: 'yellow'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        scheme: 'blue'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#'
    } %}
    {% include '@button' with {
        label: 'Apply',
        href: '#',
        external: true,
        scheme: 'black'
    } %}
</p>

<span class="label">Button links - small</span>
<p>
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'small',
        scheme: 'yellow'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'small',
        scheme: 'blue'
    } %}
    {% include '@button' with {
        label: 'Book an open day',
        href: '#',
        size: 'small'
    } %}
    {% include '@button' with {
        label: 'Apply',
        href: '#',
        size: 'small',
        external: true,
        scheme: 'black'
    } %}
</p>


<span class="label">Button links - with obnoxiously large labels</span>
<p>
    {% include '@button' with {
        label: 'Book an open day with obnoxiously large labels',
        href: '#',
        scheme: 'yellow'
    } %}
    {% include '@button' with {
        label: 'Book an open day with obnoxiously large labels',
        href: '#',
        scheme: 'blue'
    } %}
    {% include '@button' with {
        label: 'Book an open day with obnoxiously large labels',
        href: '#'
    } %}
    {% include '@button' with {
        label: 'Apply with obnoxiously large labels',
        href: '#',
        external: true,
        scheme: 'black'
    } %}
</p>
 
/* No context defined for this component. */

There are no notes for this item.