Foundation button
May 04, 2021 Foundation5
Table of contents
Foundation button
Button style
Foundation offers 6 button styles.
.button
class creates a blue button with an inner margin.
The different color button classes
.secondary
.success
.info
.warning
.alert
:
Instance
< 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 out . . .
Button classes can
<a>
used in
<button>
the elements of the .
<input>
Instance
< 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 out . . .
|
Why is the href of the a label set to ?
When we don't want the link to click jump and get the "404" page, we can set the href of the a tag to . |
|---|
The size of the button
We can
.large
.small
.tiny
classes to set the button size:
Instance
< 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 out . . .
Fillet button
You
.radius
and
.round
to set the fillet buttons:
Instance
< button type= "button" class= "button radius" > Radius Button < /button >
< button type= "button" class= "button round" > Round Button < /button >
Try it out . . .
Extension button
You
.expand
class to set the button's broadband to 100%:
Instance
< button type= "button" class= "button expand" > Expanded Button < /button >
Try it out . . .
Disable the button
You can
.disabled
class to set buttons that are not clickable:
Instance
< button type= "button" class= "button disabled" > Disabled Button < /button >
Try it out . . .