Buttons, Labels, Quotes & Alerts

Alert box

[gap]
[alert type=”success” shape=”” title=”Succes” off=”true” ]This is box with close button. The X on the right side of this box. Go, go on. Try it now![/alert][alert type=”” shape=”” title=”Standard notice” off=”false” ]Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They’ll conform to 100% of the container width you put them in.[/alert][alert type=”warning” shape=”” title=”Warning! Something is off!” off=”true” ]Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They’ll conform to 100% of the container width you put them in.[/alert][alert type=”alert” shape=”radius” title=”Alert” off=”false” ]This one is with rounded corner. Happy![/alert][alert type=”info” shape=”round” title=”Info box” off=”true” ]Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They’ll conform to 100% of the container width you put them in.[/alert][gap size=”3rem”][horizontal_line]

Quote

[gap]
[insertquote author=”Gotye” ]But you treat me like a stranger and that feels so rough. No you didn’t have to stoop so low. Have your friends collect your records and then change your number. I guess that I don’t need that though. Now you’re just somebody that I used to know.[/insertquote]

[gap][horizontal_line]

Labels

[gap]

We built this [label type=”success” shape=”” ]Website [/label]Speed Test to help you analyze the load [label type=”warning” shape=”round” ]speed[/label] of your websites and learn how to make them faster. It lets you[label type=”alert” shape=”radius” ] identify[/label] what about a web page is fast, [label type=”info” shape=”round” ]slow[/label], too big, what best practices you’re not following, and so on. We have tried to make it useful both to experts and [label type=”secondary” shape=”” ]novices[/label] alike.

[gap size=”3rem”][horizontal_line]

Buttons

[gap]
[box][one_third tablet= tablet=4 mobile=4 float=”left”][button disabled=”false” size=”tiny” bg_color=”#ffcc00″ text_color=”#000″ text_shadow=”” target=”Self” url=#]My tiny button[/button] [button disabled=”false” size=”small” bg_color=”#ffcc00″ text_color=”#000″ text_shadow=”” target=”Self” url=#]My small button[/button] [button disabled=”false” size=”large” bg_color=”#ffcc00″ text_color=”#000″ text_shadow=”” target=”Self” url=#]My large button[/button][/one_third][one_third tablet= tablet=4 mobile=4 float=”left”][button disabled=”false” shape=”radius” size=”tiny” bg_color=”#CA0701″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My tiny button[/button] [button disabled=”false” shape=”radius” size=”small” bg_color=”#CA0701″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My small button[/button] [button disabled=”false” shape=”radius” size=”large” bg_color=”#CA0701″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My large button[/button][/one_third][one_third tablet= tablet=4 mobile=4 float=”left”][button disabled=”false” shape=”round” size=”tiny” bg_color=”#54B500″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My tiny button[/button] [button disabled=”false” shape=”round” size=”small” bg_color=”#54B500″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My small button[/button] [button disabled=”false” shape=”round” size=”large” bg_color=”#54B500″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My large button[/button][/one_third][/box][gap]
[button disabled=”false” size=”expand” bg_color=”#ffcc00″ text_color=”#000″ text_shadow=”” target=”Self” url=#]My full width square button[/button]
[button disabled=”false” shape=”radius” size=”expand” bg_color=”#CA0701″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My full width rounded button[/button]
[button disabled=”false” shape=”round” size=”expand” bg_color=”#54B500″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My full width round button[/button]
[button disabled=”true” shape=”round” size=”expand” bg_color=”#54B500″ text_color=”#fff” text_shadow=”” target=”Self” url=#]My full width round disabled button[/button]