Buttons

buttons with variants for all your needs

Default buttons

Text buttons

Hollow buttons

Buttons with icons

<div class="box _background">
    <h4>Text buttons</h4>
    <button type="submit" class="button">.button</button>
    <button type="submit" class="button _primary">Primary</button>
    <button type="submit" class="button _secondary">Secondary</button>
    <button type="submit" class="button _success">Success</button>
    <button type="submit" class="button _error">Error</button>
    <button type="submit" class="button _empty">Emtpy</button>
</div>

<div class="box _background">
    <h4>Hollow buttons</h4>
    <button type="submit" class="button _hollow">.button</button>
    <button type="submit" class="button _hollow _primary">Primary</button>
    <button type="submit" class="button _hollow _secondary">Secondary</button>
    <button type="submit" class="button _hollow _success">Success</button>
    <button type="submit" class="button _hollow _error">Error</button>
    <button type="submit" class="button _hollow _empty">Emtpy</button>
</div>

<div class="box _background">
    <h4>Buttons with icons</h4>
    <button type="submit" class="button"><i class="icon-pencil"></i> Edit</button>
    <button type="submit" class="button _primary"> <i class="icon-facebook"></i> Go to facebook</button>
    <button type="submit" class="button _secondary"> <i class="icon-picture-o"></i>View picture</button>
    <button type="submit" class="button _success"><i class="icon-download"></i> Download</button>
    <button type="submit" class="button _error"><i class="icon-trash-o"></i> Delete</button>
	<button type="submit" class="button _empty"><i class="icon-times"></i> Cancel</button>
</div>

Small buttons

Text buttons

Hollow buttons

Buttons with icons

<div class="box _background">
	<h4>Text buttons</h4>
	<button type="submit" class="button _small">.button</button>
	<button type="submit" class="button _small _primary">Primary</button>
	<button type="submit" class="button _small _secondary">Secondary</button>
	<button type="submit" class="button _small _success">Success</button>
	<button type="submit" class="button _small _error">Error</button>
	<button type="submit" class="button _small _empty">Emtpy</button>
</div>

<div class="box _background">
	<h4>Hollow buttons</h4>
	<button type="submit" class="button _small _hollow">.button</button>
	<button type="submit" class="button _small _hollow _primary">Primary</button>
	<button type="submit" class="button _small _hollow _secondary">Secondary</button>
	<button type="submit" class="button _small _hollow _success">Success</button>
	<button type="submit" class="button _small _hollow _error">Error</button>
	<button type="submit" class="button _small _hollow _empty">Emtpy</button>
</div>

<div class="box _background">
	<h4>Buttons with icons</h4>
	<button type="submit" class="button _small"><i class="icon-pencil"></i> Edit</button>
	<button type="submit" class="button _small _primary"> <i class="icon-facebook"></i> Go to facebook</button>
	<button type="submit" class="button _small _secondary"> <i class="icon-picture-o"></i>View picture</button>
	<button type="submit" class="button _small _success"><i class="icon-download"></i> Download</button>
	<button type="submit" class="button _small _error"><i class="icon-trash-o"></i> Delete</button>
	<button type="submit" class="button _small _empty"><i class="icon-times"></i> Cancel</button>
</div>

Large buttons

Text buttons

Hollow buttons

Buttons with icons

<div class="box _background">
	<h4>Text buttons</h4>
	<button type="submit" class="button _large">.button</button>
	<button type="submit" class="button _large _primary">Primary</button>
	<button type="submit" class="button _large _secondary">Secondary</button>
	<button type="submit" class="button _large _success">Success</button>
	<button type="submit" class="button _large _error">Error</button>
	<button type="submit" class="button _large _empty">Emtpy</button>
</div>

<div class="box _background">
	<h4>Hollow buttons</h4>
	<button type="submit" class="button _large _hollow">.button</button>
	<button type="submit" class="button _large _hollow _primary">Primary</button>
	<button type="submit" class="button _large _hollow _secondary">Secondary</button>
	<button type="submit" class="button _large _hollow _success">Success</button>
	<button type="submit" class="button _large _hollow _error">Error</button>
	<button type="submit" class="button _large _hollow _empty">Emtpy</button>
</div>

<div class="box _background">
	<h4>Buttons with icons</h4>
	<button type="submit" class="button _large"><i class="icon-pencil"></i> Edit</button>
	<button type="submit" class="button _large _primary"> <i class="icon-facebook"></i> Go to facebook</button>
	<button type="submit" class="button _large _secondary"> <i class="icon-picture-o"></i>View picture</button>
	<button type="submit" class="button _large _success"><i class="icon-download"></i> Download</button>
	<button type="submit" class="button _large _error"><i class="icon-trash-o"></i> Delete</button>
	<button type="submit" class="button _large _empty"><i class="icon-times"></i> Cancel</button>
</div>

Customize the appearance

You can customize the appearance of this object by setting up the vars-custom map for this object. By default de values are the vars-default values.

$object-buttons-vars-default: (
	/* General settings */
	font-size: $font-size-m,
	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: 1px,
	box-shadow: 'inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.05)',
	text-shadow: 1px 1px 0 rgba(0,0,0,.15),

	/* Button small */
	small-font-family: $font-face-default,
	small-font-weight: normal,
	small-font-size: $font-size-s,
	small-padding: $spacing/6 $spacing/2,

	/* Button Large */
	large-font-family: $font-face-title,
	large-font-weight: bold,
	large-font-size: $font-size-l,
	large-padding: $spacing/4 $spacing,

	/* Default button */
	default-background: $color-foreground-light,
	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 success */
	success-background: $color-success,
	success-color: contrast-color($color-success),

	/* Button error */
	error-background: $color-error,
	error-color: contrast-color($color-error),

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

) !global !default;

$object-buttons-vars-custom: () !global !default;

$object-buttons-vars: map-merge($object-buttons-vars-default, $object-buttons-vars-custom) !global;