Buttons

ZappCode > Buttons

Rounded Buttons

Basic Buttons
[otbutton btn_text=”Primary” btn_link=”#”][otbutton btn_text=”Brand” btn_link=”#” style=”btn-brand”][otbutton btn_text=”Secondary” btn_link=”#” style=”btn-secondary”][otbutton btn_text=”Success” btn_link=”#” style=”btn-success” iclass=”btn-success”][otbutton btn_text=”Danger” btn_link=”#” style=”btn-danger” iclass=”btn-danger”][otbutton btn_text=”Warning” btn_link=”#” style=”btn-warning” iclass=”btn-warning”][otbutton btn_text=”Info” btn_link=”#” style=”btn-info” iclass=”btn-info”][otbutton btn_text=”Light” btn_link=”#” style=”btn-light” iclass=”btn-light”][otbutton btn_text=”Dark” btn_link=”#” style=”btn-dark” iclass=”btn-dark”]
Outline Buttons
[otbutton btn_text=”Primary” btn_link=”#” style=”btn-light” outline=”btn-outline-primary”][otbutton btn_text=”Brand” btn_link=”#” style=”btn-brand” outline=”btn-outline-brand”][otbutton btn_text=”Secondary” btn_link=”#” style=”btn-secondary” outline=”btn-outline-secondary”][otbutton btn_text=”Success” btn_link=”#” style=”btn-secondary” outline=”btn-outline-success” iclass=”btn-success”][otbutton btn_text=”Danger” btn_link=”#” style=”btn-secondary” outline=”btn-outline-danger” iclass=”btn-danger”][otbutton btn_text=”Warning” btn_link=”#” style=”btn-secondary” outline=”btn-outline-warning” iclass=”btn-warning”][otbutton btn_text=”Info” btn_link=”#” style=”btn-secondary” outline=”btn-outline-info” iclass=”btn-info”][otbutton btn_text=”Light” btn_link=”#” style=”btn-secondary” outline=”btn-outline-light” iclass=”btn-light”][otbutton btn_text=”Dark” btn_link=”#” style=”btn-secondary” outline=”btn-outline-dark” iclass=”btn-dark”]
Buttons Sizes
[otbutton btn_text=”Large button” btn_link=”#” size=”btn-lg”][otbutton btn_text=”Default button” btn_link=”#”][otbutton btn_text=”Small button” btn_link=”#” size=”btn-sm”][otbutton btn_text=”XSmall button” btn_link=”#” size=”btn-xs”]
Block Level Buttons
[otbutton btn_text=”Block level button” btn_link=”#” size=”btn-block”][otbutton btn_text=”Block level button” btn_link=”#” size=”btn-block” style=”btn-brand”]
Active State
[otbutton btn_text=”Primary” btn_link=”#” iclass=”active”][otbutton btn_text=”Brand” btn_link=”#” style=”btn-brand” iclass=”active”][otbutton btn_text=”Secondary” btn_link=”#” style=”btn-secondary” iclass=”active”][otbutton btn_text=”Success” btn_link=”#” style=”btn-success” iclass=”active”][otbutton btn_text=”Danger” btn_link=”#” style=”btn-danger” iclass=”active”][otbutton btn_text=”Warning” btn_link=”#” style=”btn-warning” iclass=”active”][otbutton btn_text=”Info” btn_link=”#” style=”btn-info” iclass=”active”][otbutton btn_text=”Light” btn_link=”#” style=”btn-light” iclass=”active”][otbutton btn_text=”Dark” btn_link=”#” style=”btn-dark” iclass=”active”]
Radio Buttons
[otbutton btn_text=”Active” btn_link=”#” type=”btn-rounded-left” iclass=”active btn-rounded-left”][otbutton btn_text=”Radio” btn_link=”#” type=”btn-square” iclass=”m-l–3″][otbutton btn_text=”Radio” btn_link=”#” type=”btn-rounded-right” iclass=”m-l–5 btn-rounded-right”]

Square Buttons

Basic Buttons
[otbutton btn_text=”Primary” btn_link=”#” type=”btn-square”][otbutton btn_text=”Brand” btn_link=”#” type=”btn-square” style=”btn-brand”][otbutton btn_text=”Secondary” btn_link=”#” type=”btn-square” style=”btn-secondary”][otbutton btn_text=”Success” btn_link=”#” type=”btn-square” style=”btn-success” iclass=”btn-success”][otbutton btn_text=”Danger” btn_link=”#” type=”btn-square” style=”btn-danger” iclass=”btn-danger”][otbutton btn_text=”Warning” btn_link=”#” type=”btn-square” style=”btn-warning” iclass=”btn-warning”][otbutton btn_text=”Info” btn_link=”#” type=”btn-square” style=”btn-info” iclass=”btn-info”][otbutton btn_text=”Light” btn_link=”#” type=”btn-square” style=”btn-light” iclass=”btn-light”][otbutton btn_text=”Dark” btn_link=”#” type=”btn-square” style=”btn-dark” iclass=”btn-dark”]
Outline Buttons
[otbutton btn_text=”Primary” btn_link=”#” type=”btn-square” style=”btn-light” outline=”btn-outline-primary”][otbutton btn_text=”Brand” btn_link=”#” type=”btn-square” style=”btn-brand” outline=”btn-outline-brand”][otbutton btn_text=”Secondary” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-secondary”][otbutton btn_text=”Success” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-success” iclass=”btn-success”][otbutton btn_text=”Danger” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-danger” iclass=”btn-danger”][otbutton btn_text=”Warning” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-warning” iclass=”btn-warning”][otbutton btn_text=”Info” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-info” iclass=”btn-info”][otbutton btn_text=”Light” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-light” iclass=”btn-light”][otbutton btn_text=”Dark” btn_link=”#” type=”btn-square” style=”btn-secondary” outline=”btn-outline-dark” iclass=”btn-dark”]
Buttons Sizes
[otbutton btn_text=”Large button” btn_link=”#” size=”btn-lg” type=”btn-square”][otbutton btn_text=”Default button” btn_link=”#” type=”btn-square”][otbutton btn_text=”Small button” btn_link=”#” size=”btn-sm” type=”btn-square”][otbutton btn_text=”XSmall button” btn_link=”#” size=”btn-xs” type=”btn-square”]
Block Level Buttons
[otbutton btn_text=”Block level button” btn_link=”#” size=”btn-block” type=”btn-square”][otbutton btn_text=”Block level button” btn_link=”#” size=”btn-block” type=”btn-square” style=”btn-brand”]
Active State
[otbutton btn_text=”Primary” btn_link=”#” type=”btn-square” iclass=”active”][otbutton btn_text=”Brand” btn_link=”#” type=”btn-square” style=”btn-brand” iclass=”active”][otbutton btn_text=”Secondary” btn_link=”#” type=”btn-square” style=”btn-secondary” iclass=”active”][otbutton btn_text=”Success” btn_link=”#” type=”btn-square” style=”btn-success” iclass=”active”][otbutton btn_text=”Danger” btn_link=”#” type=”btn-square” style=”btn-danger” iclass=”active”][otbutton btn_text=”Warning” btn_link=”#” type=”btn-square” style=”btn-warning” iclass=”active”][otbutton btn_text=”Info” btn_link=”#” type=”btn-square” style=”btn-info” iclass=”active”][otbutton btn_text=”Light” btn_link=”#” type=”btn-square” style=”btn-light” iclass=”active”][otbutton btn_text=”Dark” btn_link=”#” type=”btn-square” style=”btn-dark” iclass=”active”]
Radio Buttons
[otbutton btn_text=”Active” btn_link=”#” type=”btn-square” iclass=”active”][otbutton btn_text=”Radio” btn_link=”#” type=”btn-square” iclass=”m-l–3″][otbutton btn_text=”Radio” btn_link=”#” type=”btn-square” iclass=”m-l–5″]