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"
>
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
>
Try it out . . .
Button classes can
<a>
used in
<button>
the elements of the .
<input>
Instance
<
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"
>
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 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
>
Try it out . . .
Fillet button
You
.radius
and
.round
to set the fillet buttons:
Instance
<
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
>
Try it out . . .
Extension button
You
.expand
class to set the button's broadband to 100%:
Instance
<
button
type=
"button"
class=
"button"
>
Default Button
<
/button
>
<
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"
>
Default Button
<
/button
>
<
button
type=
"button"
class=
"button disabled"
>
Disabled Button
<
/button
>
Try it out . . .