#Buttons

A wide variety of buttons and options to modify them

Simple basic button

       <button class="be-btn be-bg-silver"></button>

This is a very basic button but you can add some classes. You can use the standard "warning", "info", "success" and "danger" to get the spected results.

Buttons by standard colors

<button class="be-btn be-warning">Button</button>
<button class="be-btn be-info">Button</button>
<button class="be-btn be-success">Button</button>
<button class="be-btn be-danger">Button</button>

Buttons by Flat UI Color Scheme (10 of 20)

The buttons can be customized with the twenty colors of the Flat UI Color Scheme.


<button class="be-btn be-bg-orange">Button</button>
<button class="be-btn be-bg-sun-flower">Button</button>
<button class="be-btn be-bg-emerald">Button</button>
<button class="be-btn be-bg-wisteria">Button</button>
<button class="be-btn be-bg-turquoise">Button</button>
<button class="be-btn be-bg-peter-river">Button</button>
<button class="be-btn be-bg-silver">Button</button>
<button class="be-btn be-bg-asbestos">Button</button>
<button class="be-btn be-bg-belize-hole">Button</button>
<button class="be-btn be-bg-black">Button</button>

You can use this group of colors classes in any tags to change the background color.

Buttons by brand color scheme

The Brand Color Scheme are also available for buttons and other components.

<!-- Brand colors are also available as Classes -->
<button class="be-btn be-brand-color">Button</button>
<button class="be-btn be-dark-shades">Button</button>
<button class="be-btn be-dark-accent">Button</button>
<button class="be-btn be-light-shades">Button</button>
<button class="be-btn be-light-accent">Button</button>
<button class="be-btn be-dark-dark">Button</button>

Buttons personalized

You can create a huge variety of custom buttons by combining effects and features. Here are some examples of what can be created.

The be-hover class applies a 150% brighness filter, but you can also specify the hovered color you want using other classes.

Whe you change the color of a button, the color of the text adapts automatically to have the proper contrast, however, the desired color can be specified.

<button class="be-btn be-success be-hover">Hover</button>
<button class="be-btn be-bg-orange be-rounded">Rounded</button>
<button class="be-btn be-bg-wet-asphalt be-rounded-top">Rdd Top</button>
<button class="be-btn be-bg-alizarin be-rounded be-hover-shadow">Shadow</button>
<button class="be-btn be-btn-pill be-bg-turquoise">Pill Btn</button>
<button class="be-btn be-btn-pill be-bdr-dotted be-bg-turquoise be-hover-green-sea">Pill Btn</button>
<button class="be-btn be-bdr be-bdr-2 be-bg-white be-shadow-strong">Shadow Strong</button>
<button class="be-btn be-btn-pill be-bdr be-bdr-2 be-bg-white be-shadow-strong">Pill Button</button>

Buttons sizes

You can borrow a be-width-* family class to make a button fill the entire width.

<button class="be-btn">Normal</button>
<button class="be-btn be-btn-medium">Medium</button>
<button class="be-btn be-btn-big">Big Btn</button>
<button class="be-btn be-btn-giant">Giant Btn</button>
<button class="be-btn be-width-full">Full Button</button>

Buttons Ghost

<button class="be-btn be-btn-ghost">Ghost Button</button>
<button class="be-btn be-btn-ghost be-btn-medium">Ghost Button</button>
<button class="be-btn be-btn-ghost be-bdr-dashed be-bdr-2 be-btn-big">Ghost Button</button>
<button class="be-btn be-btn-ghost be-btn-giant">Ghost Button</button>
<button class="be-btn be-btn-ghost be-btn-giant be-btn-pill">Ghost Button</button>

Note that the "ghost" function gives a transparent effect on the background. In such a way that the bottom color will be the one below.

Vertical group of buttons

By default, the buttons are smoothed horizontally. However, if you have the need to create a group of vertical buttons, you can use the be-group-vertical class for this. Although it does not include "btn" this class is exclusive to buttons.

<div class="be-group-vertical">
<button class="be-btn be-brand-color be-rounded-top">Button</button>
<button class="be-btn be-brand-color">Button</button>
<button class="be-btn be-brand-color be-rounded-bottom">Button</button>
</div>

To do the same horizontally simply group the buttons in a container and add the be-not-margin class.

<div class="be-container be-not-margin">
<button class="be-btn be-brand-color be-rounded-left">Button</button>
<button class="be-btn be-brand-color">Button</button>
<button class="be-btn be-brand-color be-rounded-right">Button</button>
</div>