Foundation button


May 04, 2021 11:00 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" > 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 . . .

Foundation button 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 . . .