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 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>
try it"
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">
<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">
try it"
 | 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>
<Button type = "button" class = "button"> Default </ button>
<Button type = "button" class = "button small"> Small </ button>
<Button type = "button" class = "button tiny"> Tiny </ button>
try it"
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 type = "button" class = "button radius"> Radius Button </ button>
<Button type = "button" class = "button round"> Round Button </ button>
try it"
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>
<Button type = "button" class = "button expand"> Expanded Button </ button>
try it"
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>
<Button type = "button" class = "button disabled"> Disabled Button </ button>
try it"