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 »]