Buttons – Fondation Philia

Small Buttons

[button href= » »]Default button[/button] [button href= » » bgcolor= »black »]Black button[/button] [button bgcolor= »red »]Red button[/button] [button bgcolor= »azure »]Azure button[/button] [button bgcolor= »green »]Green button[/button] [button bgcolor= »grey »]Grey button[/button] [button bgcolor= »yellow »]Yellow button[/button] [button bgcolor= »pink »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button bgcolor= »red »]Red button[/button]]

[/toggle]

Medium Buttons

[button size= »medium »]Default button[/button] [button size= »medium » bgcolor= »black »]Black button[/button] [button size= »medium » bgcolor= »red »]Red button[/button] [button size= »medium » bgcolor= »azure »]Azure button[/button] [button size= »medium » bgcolor= »green »]Green button[/button] [button size= »medium » bgcolor= »grey »]Grey button[/button] [button size= »medium » bgcolor= »yellow »]Yellow button[/button] [button size= »medium » bgcolor= »pink »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button size= »medium » bgcolor= »black »]Black button[/button]]

[/toggle]

Large Buttons

[button size= »large »]Default button[/button] [button size= »large » bgcolor= »black »]Black button[/button] [button size= »large » bgcolor= »red »]Red button[/button] [button size= »large » bgcolor= »azure »]Azure button[/button] [button size= »large » bgcolor= »green »]Green button[/button] [button size= »large » bgcolor= »grey »]Grey button[/button] [button size= »large » bgcolor= »yellow »]Yellow button[/button] [button size= »large » bgcolor= »pink »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button size= »large » bgcolor= »azure »]Azure button[/button]]

[/toggle]

Rounded Small Buttons

[button type= »rounded-button »]Default button[/button] [button bgcolor= »black » type= »rounded-button »]Black button[/button] [button bgcolor= »red » type= »rounded-button »]Red button[/button] [button bgcolor= »azure » type= »rounded-button »]Azure button[/button]
[button bgcolor= »green » type= »rounded-button »]Green button[/button] [button bgcolor= »grey » type= »rounded-button »]Grey button[/button] [button bgcolor= »yellow » type= »rounded-button »]Yellow button[/button] [button bgcolor= »pink » type= »rounded-button »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button bgcolor= »grey » type= »rounded-button »]Grey button[/button]]

[/toggle]

Rounded Medium Buttons

[button size= »medium » type= »rounded-button »]Default button[/button] [button size= »medium » type= »rounded-button » bgcolor= »black »]Black button[/button] [button size= »medium » type= »rounded-button » bgcolor= »red »]Red button[/button] [button size= »medium » type= »rounded-button » bgcolor= »azure »]Azure button[/button] [button size= »medium » type= »rounded-button » bgcolor= »green »]Green button[/button] [button size= »medium » type= »rounded-button » bgcolor= »grey »]Grey button[/button] [button size= »medium » type= »rounded-button » bgcolor= »yellow »]Yellow button[/button] [button size= »medium » type= »rounded-button » bgcolor= »pink »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button size= »medium » type= »rounded-button » bgcolor= »yellow »]Yellow button[/button]]

[/toggle]

Rounded Large Buttons

[button size= »large » type= »rounded-button »]Default button[/button] [button size= »large » type= »rounded-button » bgcolor= »black »]Black button[/button] [button size= »large » type= »rounded-button » bgcolor= »red »]Red button[/button] [button size= »large » type= »rounded-button » bgcolor= »azure »]Azure button[/button] [button size= »large » type= »rounded-button » bgcolor= »green »]Green button[/button] [button size= »large » type= »rounded-button » bgcolor= »grey »]Grey button[/button] [button size= »large » type= »rounded-button » bgcolor= »yellow »]Yellow button[/button] [button size= »large » type= »rounded-button » bgcolor= »pink »]Pink button[/button]

[toggle title= »Get the code » hidden= »true »]

[[button size= »large » type= »rounded-button » bgcolor= »pink »]Pink button[/button]]

[/toggle]

Completely Flexible and Customisable

[button href= »http:// » target= »_self » size= »medium » bgcolor= »green » type= »button »]All Buttons are Completely Flexible…[/button]

[button href= »http:// » id= » » class= » » target= »_self » size= »small » border_color= » » color= »#ffffff » bgcolor= »#000000″ type= »button »]Content goes here…[/button]

[divider type= »type_1″]

Predefined bgcolors available: yellow, azure, red, black, green, pink, grey

[info]

List of possible attributes:

target- Link target (_blank, _self)
href – Url (http://www.example.com/)
class – Custom button class which you can use to style it differently
size – Button size (small, medium, large)
border_color – Button border color
bgcolor – Button background color
type – Type (button, rounded-button)

[/info]