Button
Easily insert buttons or call-to-actions easily in your page, you can customize the button colors, size, effect and much more, check some of our examples below.
Button Sizes
4 different sizes, Large, Medium, Small and Custom
[cesis_button button_text=”Small” link=”https://themeforest.net/item/cesis-responsive-multipurpose-wordpress-theme/21736436?ref=tranmautritam” target=”_blank” button_pos=”center” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Medium” button_pos=”center” button_size=”cesis_button_medium” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Large” button_pos=”center” button_size=”cesis_button_large” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Custom” button_pos=”center” button_size=”cesis_button_custom” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
Button Border Sizes
You can change the border size to whatever size you like easily
[cesis_button button_text=”Border 1px” button_pos=”center” button_border=”1″ button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Border 2px” button_pos=”center” button_size=”cesis_button_medium” button_border=”2″ button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”border 3px” button_pos=”center” button_size=”cesis_button_large” button_border=”3″ button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Border 4px” button_pos=”center” button_size=”cesis_button_custom” button_width=”200px” button_height=”60px” button_border=”4″ button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
Button Shapes
You can change the button shape, set the border radius to what you like
[cesis_button button_text=”Squared” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Rounded” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ button_radius=”5″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Rounded” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ button_radius=”10″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Circle” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_radius=”1000″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
Button with icon
You can add icons to the buttons, you can choose from 1000+ icons
[cesis_button button_text=”Icon left” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-countdown”]
[cesis_button button_text=”Icon right” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_pos=”cesis_button_icon_right” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-copy2″]
[cesis_button button_text=”Icon left” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_animation=”hover” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-lightbulb”]
[cesis_button button_text=”Icon right” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_pos=”cesis_button_icon_right” icon_animation=”hover” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-lifesaver”]
[cesis_button button_text=”Icon left” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_style=”boxed” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-heart-o”]
[cesis_button button_text=”Icon right” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_pos=”cesis_button_icon_right” icon_style=”boxed” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-speech-bubble”]
[cesis_button button_text=”Icon left” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_style=”boxed” icon_animation=”hover” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-check2″]
[cesis_button button_text=”Icon right” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ use_icon=”yes” icon_pos=”cesis_button_icon_right” icon_style=”boxed” icon_animation=”hover” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ icon=”fa-rightarrow-tail”]
Button shadow effects
Choose from 3 types of shadow effects and 3 type of hover reactions for shadows
[cesis_button button_text=”Blur” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”blur” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Dropdown” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”dropdown” h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#ffffff”]
[cesis_button button_text=”Solid” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”solid” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Always on” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”blur” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”show on hover” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”dropdown” shadow_hover=”hover” h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#ffffff”]
[cesis_button button_text=”Hide on hover” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ shadow_type=”solid” shadow_hover=”off_hover” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
Button hover effects
Check the hover effects you can use, you can also combine them with shadow effects
[cesis_button button_text=”Shine” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”shine” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf”]
[cesis_button button_text=”Grow” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”grow” h_button_text_color=”#ffffff” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf”]
[cesis_button button_text=”Shrink” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”shrink” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf”]
[cesis_button button_text=”Outline outward” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”outline_o” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Outline inline” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”outline_i” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Trim” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”trim” h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
Button 3d effects
The awesome 3d hover effect, make some movement to your page.
[cesis_button button_text=”3D full” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ hover=”3d” h_button_text_color=”#ffffff” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf”]
[cesis_button button_text=”3D Stroke” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ hover=”3d” button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf”]
[cesis_button button_text=”3D Icon” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ use_icon=”yes” hover=”3d” button_text_color=”#333333″ button_bg_color=”#ffffff” button_border_color=”#333333″ h_button_text_color=”#ffffff” h_button_bg_color=”#538cbf” h_button_border_color=”#538cbf” icon=”fa-cloud-download2″]
Button colors
You can add icons to the buttons, you can choose from 1000+ icons
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_bg_color=”#2091c9″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_bg_color=”#5073c4″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_bg_color=”#9b59b6″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ button_bg_color=”#abd67e” button_border_color=”#abd67e” h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ button_bg_color=”#f39705″ button_border_color=”#f39705″ h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ button_bg_color=”#e25611″ button_border_color=”#e25611″ h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#333333″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”2″ button_bg_color=”#ef1d38″ button_border_color=”#ef1d38″ h_button_text_color=”#333333″ h_button_bg_color=”#ffffff” h_button_border_color=”#333333″]
Button typography
You can change the font style, size for every buttons you create
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” button_border=”1″ h_button_bg_color=”#333333″ h_button_border_color=”#333333″ button_l_spacing=”2″]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ button_font=”alt_font” button_f_size=”18px” button_f_weight=”400″ button_t_transform=”none”]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ button_font=”custom” button_google_fonts=”font_family:Playfair%20Display%3Aregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20italic%3A400%3Aitalic” button_f_size=”20px” button_t_transform=”none”]
[cesis_button button_text=”Purchase now” button_pos=”center” button_size=”cesis_button_custom” button_width=”85%” button_height=”55px” h_button_bg_color=”#333333″ h_button_border_color=”#333333″ button_font=”custom” button_google_fonts=”font_family:Merriweather%3A300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” button_f_size=”18px” button_t_transform=”none”]