èƵ

Customizable Shadow Button

This asset allows the user to create a custom button with a hover shadow effect.  You can change the shape, color, width and font of the button by changing the class.
 
 
  ◐   Preview Snippet
 
 
 
 

 

Button Shape

Button Shape 1

Class: co501vb-crnr-01 - Squared, sharp corners

Button Shape 2

Class: .co501vb-crnr-02 - Lightly rounded corners

Button Shape 3

Class: .co501vb-crnr-03 - Medium rounded corners

Button Shape 4

Class:. co501vb-crnr-04 - Heavily rounded corners

 

Button Color

Button Color 1

Class: co501vb-USABLUE - USA Blue with a red hover

Button Color 2

Class: .co501vb-USARED - USA Red with a blue hover

Button Color 3

Class: .co501vb-USAGREY - Grey with a powder blue hover

Button Color 4

Class: .co501vb-USAPOWDERBLUE - Powder blue with a grey hover

Button Width

Button Small Width

Class: .co501vb-smallwidth - Smallest size

Button Medium Width

Class: .co501vb-mediumwidth - Medium sized

Button Full Width

Class: .co501vb-fullwidth - Full width at 100%

 

Button Font Size

Button Font Size Small

.co501vb-fntsm - Small Font

Button Font Size Medium

.co501vb-fntmed - Medium Font

Button Font Size Large

.co501vb-fntlg - Large Font

 

 

 
  ◐   èƵ Customizable Shadow Button
 
 
 
 
Setup Instructions:

Using your WYSIWYG editor, select snippet, select Customizable Shadow Button and click insert. Click on button and edit link to change to your link and button text. Choose from classes listed above to change the shape, color, width, or font size.
Mobile Status:
Responsive
Maintained by:
Site Webmaster

Maintenance Difficulty Level:
Easy to Maintain