Buttons

Buttons inside your pages are actually links that are styled to look like buttons and not actual button elements.  

Button CSS is meant to be used within the link editor dialog box.  Do not place these styles in your CSS section style as they will not work as intended.

There are three variations on the types of buttons you can create along with some modifiers.  These classes do not belong in the section CSS box, they are designed to be used on the hyperlink editing box inside the Omni CMS text editor.

Color Buttons

Example Button 1

* added "rounded" to button class

Hover Buttons

Example Button 2

* added "pill" to button class

Button Modifiers

Buttons have sharp corners and resemble a box.  To soften the edges or make a pill shape, use one of the CSS styles below in addition to your button class.  Add a space between the class and the modifier.

• chamfer
• rounded
• pill
• width - see below

Color Buttons

The color button uses one of the colors set by your page's theme.  The hover / focus will swap the text and background colors to provide the user some feedback.

Hover Buttons

The hover button has no color in the background until you hover or focus on it. 

Glass Buttons

These are useful when you have a background image.  The filter blurs the image slightly behind just the button.  When you hover / focus on the button a solid color of your choice will appear.

Button Width

Keep your layout well formatted with consistent button sizes.  These widths will set a minimum width for the button to start with.  We moved this to a minimum width to help avoid uncessary wrapping and buttons that would not align as nicely.  

Test width button

Button Heights

Keep your layout well formatted with consistent button sizes.  These heights will set a minimum height for the button to start with.  This will help keep buttons from needing to have line breaks (<br/>) from adding height.

Test height button