ComboStrap UI - Button

Undraw Add Content Re Vgqa


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

The only action attached is to navigate to another page.


The button used by default is the primary color configuration.

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


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

Large button

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


<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>


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


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


The button component is a fully super set HTML component

A button can be used:


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)


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>


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>


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.


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

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

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 to...
Undraw My Documents
Collapse or expand any component with the toggle effect

The toggleTargetId is an attribute that transform a link or a button in a toggle element
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
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

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...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
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...

Task Runner