CSS Buttons

Default buttons

JUST TEXT

TEXT & ICON

JUST ICON

	                <div class="mb-l">
    <h4>JUST TEXT</h4>
    <button type="submit" class="button">.button</button>
    <button type="submit" class="button-primary">.button-primary</button>
    <button type="submit" class="button-secondary">.button-secondary</button>
    <button type="submit" class="button-ok">.button-ok</button>
    <button type="submit" class="button-ko">.button-ko</button>
    <button type="submit" class="button-empty">.button-empty</button>
</div>
<div class="mb-l">
    <h4>TEXT & ICON</h4>
    <button type="submit" class="button icon-pencil">Edit</button>
    <button type="submit" class="button-primary icon-facebook">Go to facebook</button>
    <button type="submit" class="button-secondary icon-picture-o">View picture</button>
    <button type="submit" class="button-ok icon-download">Download</button>
    <button type="submit" class="button-ko icon-times">Delete</button>
	<button type="submit" class="button-empty icon-times">Cancel</button>
</div>

<div class="mb-l">
    <h4>JUST ICON</h4>
    <button type="submit" class="button button-icon icon-pencil"></button>
    <button type="submit" class="button-primary button-icon icon-facebook"></button>
    <button type="submit" class="button-secondary button-icon icon-picture-o"></button>
    <button type="submit" class="button-ok button-icon icon-download"></button>
    <button type="submit" class="button-ko button-icon icon-times"></button>
	<button type="submit" class="button-empty button-icon icon-times"></button>
</div>


                

Slim buttons

JUST TEXT

TEXT & ICON

JUST ICON

	                <div class="mb-l">
	<h4>JUST TEXT</h4>
	<button type="submit" class="button button-slim">.button</button>
	<button type="submit" class="button-primary button-slim">.button-primary</button>
	<button type="submit" class="button-secondary button-slim">.button-secondary</button>
	<button type="submit" class="button-ok button-slim">.button-ok</button>
	<button type="submit" class="button-ko button-slim">.button-ko</button>
	<button type="submit" class="button-empty button-slim">.button-empty</button>
</div>
<div class="mb-l">
	<h4>TEXT & ICON</h4>
	<button type="submit" class="button button-slim icon-pencil">Edit</button>
	<button type="submit" class="button-primary button-slim icon-facebook">Go to facebook</button>
	<button type="submit" class="button-secondary button-slim icon-picture-o">View picture</button>
	<button type="submit" class="button-ok button-slim icon-download">Download</button>
	<button type="submit" class="button-ko button-slim icon-times">Delete</button>
	<button type="submit" class="button-empty button-slim icon-times">Cancel</button>
</div>

<div class="mb-l">
	<h4>JUST ICON</h4>
	<button type="submit" class="button button-slim button-icon icon-pencil"></button>
	<button type="submit" class="button-primary button-slim button-icon icon-facebook"></button>
	<button type="submit" class="button-secondary button-slim button-icon icon-picture-o"></button>
	<button type="submit" class="button-ok button-slim button-icon icon-download"></button>
	<button type="submit" class="button-ko button-slim button-icon icon-times"></button>
	<button type="submit" class="button-empty button-slim button-icon icon-times"></button>
</div>


                

Fat buttons

JUST TEXT

TEXT & ICON

JUST ICON

	                <div class="mb-l">
	<h4>JUST TEXT</h4>
	<button type="submit" class="button button-fat">.button</button>
	<button type="submit" class="button-primary button-fat">.button-primary</button>
	<button type="submit" class="button-secondary button-fat">.button-secondary</button>
	<button type="submit" class="button-ok button-fat">.button-ok</button>
	<button type="submit" class="button-ko button-fat">.button-ko</button>
	<button type="submit" class="button-empty button-fat">.button-empty</button>
</div>
<div class="mb-l">
	<h4>TEXT & ICON</h4>
	<button type="submit" class="button button-fat icon-pencil">Edit</button>
	<button type="submit" class="button-primary button-fat icon-facebook">Go to facebook</button>
	<button type="submit" class="button-secondary button-fat icon-picture-o">View picture</button>
	<button type="submit" class="button-ok button-fat icon-download">Download</button>
	<button type="submit" class="button-ko button-fat icon-times">Delete</button>
	<button type="submit" class="button-empty button-fat icon-times">Cancel</button>
</div>

<div class="mb-l">
	<h4>JUST ICON</h4>
	<button type="submit" class="button button-fat button-icon icon-pencil"></button>
	<button type="submit" class="button-primary button-fat button-icon icon-facebook"></button>
	<button type="submit" class="button-secondary button-fat button-icon icon-picture-o"></button>
	<button type="submit" class="button-ok button-fat button-icon icon-download"></button>
	<button type="submit" class="button-ko button-fat button-icon icon-times"></button>
	<button type="submit" class="button-empty button-fat button-icon icon-times"></button>
</div>


                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-buttons-vars-custom: (
// General settings
text-shadow: 0 1px rgba($color-foreground, .3),
font-size: $font-size-default,
font-weight: bold,
text-transform: normal,
font-family: $font-face-title,
padding: $spacing/3 $spacing,
margin: 0 $spacing/4 $spacing/4 0,
border: 0px none,
border-radius: $default-border-radius,
box-shadow: none,

// Button slim
slim-font-family: $font-face-default,
slim-font-weight: normal,
slim-font-size: $font-size-xs,
slim-padding: $spacing/6 $spacing/2,

// Button fat
fat-font-family: $font-face-title,
fat-font-weight: bold,
fat-font-size: $font-size-xl,
fat-padding: $spacing/4 $spacing,

// Default button
default-background: rgba($color-foreground, .35),
default-color: $color-background,
default-background-active: rgba($color-foreground, .25),
default-color-active: $color-background,

// Button primary
primary-background: $color-primary,
primary-color: contrast-color($color-primary),

// Button secondary
secondary-background: $color-secondary,
secondary-color: contrast-color($color-secondary),

// Button ok
ok-background: $color-ok,
ok-color: contrast-color($color-ok),

// Button ko
ko-background: $color-ko,
ko-color: contrast-color($color-ko),

// Button empty
empty-background: none,
empty-color: $color-link,
empty-text-shadow: none,

) !global !default;