Button | Easy.css

Example:

Easy.css provides several several button styles, each with a different purpose.


            <button class="btn">Button</button>

            <button class="btn secondary">Secondary</button>

            <button class="btn primary">Primary</button>

            <button class="btn success">Success</button>

            <button class="btn danger">Danger</button>

            <button class="btn warning">Warning</button>

            <button class="btn info">Info</button>

Outline Button:

Outline Button is a button with a border with no background color. Background color is transparent unless u hover over the button. They are similar to the buttons in the previous example.


            <button class="btn outline-primary">Outline Button
            Primary</button>

            <button class="btn outline-secondary">Outline Button
            Secondary</button>

            <button class="btn outline-success">Outline Button
            Success</button>

            <button class="btn outline-danger">Outline Button
            Danger</button>

            <button class="btn outline-warning">Outline Button
            Warning</button>

            <button class="btn outline-info">Outline Button
            Info</button>

Disabled Button:

Disabled buttons are used to indicate that a button is unavailable. They are most commonly used for secondary actions and are usually used in forms to indicate that a button is disabled when the form has some error or the user did not fill out the form correctly.


            <button class="btn"
            disabled>Disabled</button>

Button Size:

Easy.css provides several sizes for buttons. The size of a button indicates how much space it should take up.


            <button class="btn primary small">Small</button>

            <button class="btn primary">Default</button>

            <button class="btn primary large">Large</button>

Round Button:

Round buttons are used to indicate an action that is important and should be done quickly.


            <button class="btn round">+</button>

            <button class="btn round primary">+</button>

            <button class="btn round secondary">+</button>

            <button class="btn round success">+</button>

            <button class="btn round danger">+</button>

            <button class="btn round warning">+</button>

            <button class="btn round info">+</button>

Long Button:

A long button is a button that spans the full width of its container. A long button is used for actions that require more space.


            <div class="long-grid">

              <button class="btn primary long">Long</button>

              <button class="btn secondary long">Long
            Secondary Button</button>

            </div>