ComboStrap UI - Button

Undraw Add Content Re Vgqa

About

Button is a ComboStrap UI component that implements a button style.

The only action attached is to navigate to another page.

Example

The button used by default is the primary color configuration.

<btn>[[:start|Go to ComboStrap]]</btn>
<btn secondary color="yellow">[[https://combostrap.com/button|Go to this page via an external link]]</btn>

Spacing

<btn class="p-3">[[:start|Go to ComboStrap]]</btn>

Large button

<btn size="large">[[:start|Go to ComboStrap]]</btn>

Colors

<btn color="black" background-color="teal">[[:start|Go to ComboStrap]]</btn>

Hover Animation

You can also add hover animation.

  • Float
<btn onhover="float">[[:start|Go to ComboStrap]]</btn>
  • Zoom
<btn onhover="grow">[[:start|Go to ComboStrap]]</btn>

Syntax

<button type size="medium" elevation="false" skin="outline|...">
</button>

or

<btn type size="medium" elevation="false" skin="outline|...">
</btn>

where:

The button component is a fully super set HTML component

A button can be used:

Type

The type of the button defines its styling:

<btn>Primary (Default)</btn>
<btn secondary>Secondary</btn>
<btn success>Success</btn>
<btn danger>Danger</btn>
<btn warning>Warning</btn>
<btn info>Info</btn>
<btn light>Light</btn>
<btn dark>Dark</btn>
<btn link>Link</btn>

primary and secondary colors are branding colors and can be configured: Branding Colors (primary, secondary)

Size

Button is a component that responds to the size attribute

  • small
  • medium (default)
  • large
<btn size="large" >Large</btn>
<btn >Medium</btn>
<btn size="small">Small</btn>

Skin

Control the more emphasis of your button by using the skin attribute

<btn skin="contained" >Extra High emphasis</btn>
<btn skin="filled">High emphasis</btn>
<btn skin="outline" >Medium emphasis</btn>
<btn skin="text">Low emphasis</btn>

Elevation

All styling attribute are available but you may want to give more emphasis by adding a big shadow around the box with the elevation attribute

<btn shadow="lg" >Large Elevated button</btn>

How to ?

Center two buttons

Buttons are inline elements which means that they can be added in a line and are therefore not a block.

If you want to center two buttons, you need to wrap them in a box element and center it.

Example:

<box align="center" width="fit-content">
    <btn>[[#|Button 1]]</btn> <btn skin="outline">[[#|Button 2]]</btn>
</box>




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to center a link or a button ?

This how to will show you how to center a link. A link can be styled via its properties and because a link is a also a type of button, this page shows you the two possibilities. A link is a phrase...


Recommended Pages
Primary Secondary Color
Branding Colors (primary, secondary)

The branding colors are the most dominant colors of your theme. They bring a connection to your brand.
Undraw Dark Mode 2xam
CSS Variable

CSS This is an advanced CSS topic that you can use while creating your theme. You can set CSS variables: to have a global set of CSS values to customize the bootstrap stylesheet CSS If you want...
Undraw My Documents
ComboStrap Styling - Skin attribute (Button Emphasis Control)

skin is a ComboStrap styling attribute that defines the emphasis level of your button by applying a set of standard styling attribute on: color elevation (shadow) and border where value is one...
Undraw My Documents
ComboStrap UI - Brand Button or Link

brand is a component that creates a company / brand button or link with the corresponding: logo icon and colors By default, the brand component will show your brand. Ie a button with: your...
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Undraw Website Builder Re Ii6e
ComboStrap UI - Jumbotron

A jumbotron is a default Hero unit that emphase prominently its content. buttonleadtexthorizontal rule A jumbotron is a hero unit style content with a medium value by default where: the Hero...
Undraw My Documents
ComboStrap UI - Menu bar

A menubar is an horizontal navigational bar with links and dropdown menu that should be used in the page header. The start of the menubar. The brand. You can also put your logo icon Collapse...
Undraw My Documents
ComboStrap UI - Teaser

A teaser is just an alias for a card with a call to action such as a button. call to actionteaser Syntax Output:
Tooltip Illustration
ComboStrap UI - Tooltip

A Tooltip displays informative text when users hover over, focus on, or tap an element.
Undraw My Documents
Hover animation

Improve the emphasis of your component by adding onHover animation



Task Runner