1. Home
  2. Foundation Button

The best Foundation Button Tutorial In 2024, In this tutorial you can learn Button Style,Button Size,Rounded button,Button extension,Disable button,

Foundation Button

Button Style

Foundation offers six button styles. .button class creates a blue button together with padding. Different colors for the button class: .secondary , .success , .info , .warning or .alert :

Examples

<Button type = "button" class = "button"> Default </ button>
<Button type = "button" class = "button secondary"> Secondary </ button>
<Button type = "button" class = "button success"> Success </ button>
<Button type = "button" class = "button info"> Info </ button>
<Button type = "button" class = "button warning"> Warning </ button>
<Button type = "button" class = "button alert"> Alert </ button>

Button class can be used in <a> , <button> , or <input> element:

Examples

<A href = "#" class = "button info" role = "button"> Link Button </ a>
<Button type = "button" class = "button info"> Button </ button>
<Input type = "button" class = "button info" value = "Input Button">
<Input type = "submit" class = "button info" value = "Submit Button">


Note Why would a href tag to #?

When we do not want to jump and click on the link to get "404" page, we can set a href tag #.

Button Size

We can use .large , .small or .tiny class to set the size of the button:

Examples

<Button type = "button" class = "button large"> Large </ button>
<Button type = "button" class = "button"> Default </ button>
<Button type = "button" class = "button small"> Small </ button>
<Button type = "button" class = "button tiny"> Tiny </ button>

Rounded button

You can use .radius and .round class to set the round button:

Examples

<Button type = "button" class = "button"> Default Button </ button>
<Button type = "button" class = "button radius"> Radius Button </ button>
<Button type = "button" class = "button round"> Round Button </ button>

Button extension

You can use .expand class to set the button to 100% broadband:

Examples

<Button type = "button" class = "button"> Default Button </ button>
<Button type = "button" class = "button expand"> Expanded Button </ button>

Disable button

You can use .disabled class to click the Settings button is not available:

Examples

<Button type = "button" class = "button"> Default Button </ button>
<Button type = "button" class = "button disabled"> Disabled Button </ button>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation Button
10/30