.button-6622ee8b23715 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23715 { background-color:#ff6b6b; } .button-6622ee8b23715:hover { background-color:#ed6464; } .button-6622ee8b23715.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-6622ee8b23715.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

Introducing 3D buttons!

As the whole web goes 3D, we implemented amazing 3D buttons into Jupiter theme for the first time. They are perfectly crafted and simulate 3D feeling of pushing a real button. Check different styles and colors below.

3D buttons

3D buttons – Small

.button-6622ee8b23d45 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23d45 { background-color:#1265a8; } .button-6622ee8b23d45:hover { background-color:#115e9c; } .button-6622ee8b23d45.three-dimension { box-shadow: 0px 3px 0px 0px #0e5186; } .button-6622ee8b23d45.three-dimension:active { box-shadow: 0px 1px 0px 0px #0e5186; }
.button-6622ee8b23ddd { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23ddd { background-color:#c9c9c9; } .button-6622ee8b23ddd:hover { background-color:#bbbbbb; } .button-6622ee8b23ddd.three-dimension { box-shadow: 0px 3px 0px 0px #a1a1a1; } .button-6622ee8b23ddd.three-dimension:active { box-shadow: 0px 1px 0px 0px #a1a1a1; }
.button-6622ee8b23e6b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23e6b { background-color:#c22525; } .button-6622ee8b23e6b:hover { background-color:#b42222; } .button-6622ee8b23e6b.three-dimension { box-shadow: 0px 3px 0px 0px #9b1e1e; } .button-6622ee8b23e6b.three-dimension:active { box-shadow: 0px 1px 0px 0px #9b1e1e; }
.button-6622ee8b23ef5 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23ef5 { background-color:#f58e18; } .button-6622ee8b23ef5:hover { background-color:#e48416; } .button-6622ee8b23ef5.three-dimension { box-shadow: 0px 3px 0px 0px #c47213; } .button-6622ee8b23ef5.three-dimension:active { box-shadow: 0px 1px 0px 0px #c47213; }
.button-6622ee8b23f8a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b23f8a { background-color:#59ba41; } .button-6622ee8b23f8a:hover { background-color:#53ad3c; } .button-6622ee8b23f8a.three-dimension { box-shadow: 0px 3px 0px 0px #479534; } .button-6622ee8b23f8a.three-dimension:active { box-shadow: 0px 1px 0px 0px #479534; }

3D buttons – Medium

.button-6622ee8b241be { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b241be { background-color:#68cced; } .button-6622ee8b241be:hover { background-color:#61bedc; } .button-6622ee8b241be.three-dimension { box-shadow: 0px 3px 0px 0px #53a3be; } .button-6622ee8b241be.three-dimension:active { box-shadow: 0px 1px 0px 0px #53a3be; }
.button-6622ee8b24250 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24250 { background-color:#e09a25; } .button-6622ee8b24250:hover { background-color:#d08f22; } .button-6622ee8b24250.three-dimension { box-shadow: 0px 3px 0px 0px #b37b1e; } .button-6622ee8b24250.three-dimension:active { box-shadow: 0px 1px 0px 0px #b37b1e; }
.button-6622ee8b242da { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b242da { background-color:#e2e0cf; } .button-6622ee8b242da:hover { background-color:#d2d0c1; } .button-6622ee8b242da.three-dimension { box-shadow: 0px 3px 0px 0px #b5b3a6; } .button-6622ee8b242da.three-dimension:active { box-shadow: 0px 1px 0px 0px #b5b3a6; }
.button-6622ee8b24361 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24361 { background-color:#008b83; } .button-6622ee8b24361:hover { background-color:#00817a; } .button-6622ee8b24361.three-dimension { box-shadow: 0px 3px 0px 0px #006f69; } .button-6622ee8b24361.three-dimension:active { box-shadow: 0px 1px 0px 0px #006f69; }
.button-6622ee8b243e7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b243e7 { background-color:#3d4a57; } .button-6622ee8b243e7:hover { background-color:#394551; } .button-6622ee8b243e7.three-dimension { box-shadow: 0px 3px 0px 0px #313b46; } .button-6622ee8b243e7.three-dimension:active { box-shadow: 0px 1px 0px 0px #313b46; }

3D buttons – Large

.button-6622ee8b245e4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b245e4 { background-color:#ff6b6b; } .button-6622ee8b245e4:hover { background-color:#ed6464; } .button-6622ee8b245e4.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-6622ee8b245e4.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-6622ee8b24670 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24670 { background-color:#5e5870; } .button-6622ee8b24670:hover { background-color:#575268; } .button-6622ee8b24670.three-dimension { box-shadow: 0px 3px 0px 0px #4b465a; } .button-6622ee8b24670.three-dimension:active { box-shadow: 0px 1px 0px 0px #4b465a; }
.button-6622ee8b246f7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b246f7 { background-color:#bfdb83; } .button-6622ee8b246f7:hover { background-color:#b2cc7a; } .button-6622ee8b246f7.three-dimension { box-shadow: 0px 3px 0px 0px #99af69; } .button-6622ee8b246f7.three-dimension:active { box-shadow: 0px 1px 0px 0px #99af69; }
.button-6622ee8b2477d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b2477d { background-color:#49cdc8; } .button-6622ee8b2477d:hover { background-color:#44bfba; } .button-6622ee8b2477d.three-dimension { box-shadow: 0px 3px 0px 0px #3aa4a0; } .button-6622ee8b2477d.three-dimension:active { box-shadow: 0px 1px 0px 0px #3aa4a0; }
.button-6622ee8b24802 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24802 { background-color:#705146; } .button-6622ee8b24802:hover { background-color:#684b41; } .button-6622ee8b24802.three-dimension { box-shadow: 0px 3px 0px 0px #5a4138; } .button-6622ee8b24802.three-dimension:active { box-shadow: 0px 1px 0px 0px #5a4138; }

Outline buttons

.button-6622ee8b249fb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-6622ee8b24a80 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-6622ee8b24b00 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }

2D buttons

2D buttons – Small

.button-6622ee8b24d42 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24d42 { background-color:#1265a8; } .button-6622ee8b24d42:hover { background-color:#115e9c; } .button-6622ee8b24d42.three-dimension { box-shadow: 0px 3px 0px 0px #0e5186; } .button-6622ee8b24d42.three-dimension:active { box-shadow: 0px 1px 0px 0px #0e5186; }
.button-6622ee8b24dcf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24dcf { background-color:#c9c9c9; } .button-6622ee8b24dcf:hover { background-color:#bbbbbb; } .button-6622ee8b24dcf.three-dimension { box-shadow: 0px 3px 0px 0px #a1a1a1; } .button-6622ee8b24dcf.three-dimension:active { box-shadow: 0px 1px 0px 0px #a1a1a1; }
.button-6622ee8b24e56 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24e56 { background-color:#b42222; } .button-6622ee8b24e56:hover { background-color:#a72020; } .button-6622ee8b24e56.three-dimension { box-shadow: 0px 3px 0px 0px #901b1b; } .button-6622ee8b24e56.three-dimension:active { box-shadow: 0px 1px 0px 0px #901b1b; }
.button-6622ee8b24edc { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24edc { background-color:#f58e18; } .button-6622ee8b24edc:hover { background-color:#e48416; } .button-6622ee8b24edc.three-dimension { box-shadow: 0px 3px 0px 0px #c47213; } .button-6622ee8b24edc.three-dimension:active { box-shadow: 0px 1px 0px 0px #c47213; }
.button-6622ee8b24f60 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b24f60 { background-color:#59ba41; } .button-6622ee8b24f60:hover { background-color:#53ad3c; } .button-6622ee8b24f60.three-dimension { box-shadow: 0px 3px 0px 0px #479534; } .button-6622ee8b24f60.three-dimension:active { box-shadow: 0px 1px 0px 0px #479534; }

2D buttons – Medium

.button-6622ee8b25178 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25178 { background-color:#68cced; } .button-6622ee8b25178:hover { background-color:#61bedc; } .button-6622ee8b25178.three-dimension { box-shadow: 0px 3px 0px 0px #53a3be; } .button-6622ee8b25178.three-dimension:active { box-shadow: 0px 1px 0px 0px #53a3be; }
.button-6622ee8b25206 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25206 { background-color:#e09a25; } .button-6622ee8b25206:hover { background-color:#d08f22; } .button-6622ee8b25206.three-dimension { box-shadow: 0px 3px 0px 0px #b37b1e; } .button-6622ee8b25206.three-dimension:active { box-shadow: 0px 1px 0px 0px #b37b1e; }
.button-6622ee8b2528d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b2528d { background-color:#e2e0cf; } .button-6622ee8b2528d:hover { background-color:#d2d0c1; } .button-6622ee8b2528d.three-dimension { box-shadow: 0px 3px 0px 0px #b5b3a6; } .button-6622ee8b2528d.three-dimension:active { box-shadow: 0px 1px 0px 0px #b5b3a6; }
.button-6622ee8b25313 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25313 { background-color:#008b83; } .button-6622ee8b25313:hover { background-color:#00817a; } .button-6622ee8b25313.three-dimension { box-shadow: 0px 3px 0px 0px #006f69; } .button-6622ee8b25313.three-dimension:active { box-shadow: 0px 1px 0px 0px #006f69; }
.button-6622ee8b25397 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25397 { background-color:#3d4a57; } .button-6622ee8b25397:hover { background-color:#394551; } .button-6622ee8b25397.three-dimension { box-shadow: 0px 3px 0px 0px #313b46; } .button-6622ee8b25397.three-dimension:active { box-shadow: 0px 1px 0px 0px #313b46; }

2D buttons – Large

.button-6622ee8b25584 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25584 { background-color:#ff6b6b; } .button-6622ee8b25584:hover { background-color:#ed6464; } .button-6622ee8b25584.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-6622ee8b25584.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-6622ee8b2560e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b2560e { background-color:#5e5870; } .button-6622ee8b2560e:hover { background-color:#575268; } .button-6622ee8b2560e.three-dimension { box-shadow: 0px 3px 0px 0px #4b465a; } .button-6622ee8b2560e.three-dimension:active { box-shadow: 0px 1px 0px 0px #4b465a; }
.button-6622ee8b25694 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25694 { background-color:#b7e05e; } .button-6622ee8b25694:hover { background-color:#aad057; } .button-6622ee8b25694.three-dimension { box-shadow: 0px 3px 0px 0px #92b34b; } .button-6622ee8b25694.three-dimension:active { box-shadow: 0px 1px 0px 0px #92b34b; }
.button-6622ee8b25719 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b25719 { background-color:#49cdc8; } .button-6622ee8b25719:hover { background-color:#44bfba; } .button-6622ee8b25719.three-dimension { box-shadow: 0px 3px 0px 0px #3aa4a0; } .button-6622ee8b25719.three-dimension:active { box-shadow: 0px 1px 0px 0px #3aa4a0; }
.button-6622ee8b2579d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-6622ee8b2579d { background-color:#705146; } .button-6622ee8b2579d:hover { background-color:#684b41; } .button-6622ee8b2579d.three-dimension { box-shadow: 0px 3px 0px 0px #5a4138; } .button-6622ee8b2579d.three-dimension:active { box-shadow: 0px 1px 0px 0px #5a4138; }

3D animated buttons

Go 3D on your page with this brand new shortcode. It feels like a real button both in terms of graphic and animation.

#box-icon-6622ee8b25b47 p{color:#404b57;}#box-icon-6622ee8b25b47 h4 {color:#ffffff!important;}

Unlimited colors

You can assign any color value to each button you create. The default color however is same as the one you choose in typography setting.

#box-icon-6622ee8b25c82 p{color:#404b57;}#box-icon-6622ee8b25c82 h4 {color:#ffffff!important;}

1500+ icons for buttons

Yes! You can choose between a huge collection of 1500+ amazing icons and assign to each button.

#box-icon-6622ee8b25dae p{color:#404b57;}#box-icon-6622ee8b25dae h4 {color:#ffffff!important;}
.full-width-6622ee8b2595a { min-height:100px; padding:50px 0 50px; margin-bottom:0px; background-color:#00c8d7; border:1px solid #00c8d7;border-left:none;border-right:none; } #background-layer--6622ee8b2595a { background-position:left top; background-repeat:repeat; ; } .full-width-6622ee8b2595a .mk-fancy-title.pattern-style span, .full-width-6622ee8b2595a .mk-blog-view-all { background-color: #00c8d7 !important; }