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