.button-657709b39c2d6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39c2d6 { background-color:#ff6b6b; } .button-657709b39c2d6:hover { background-color:#ed6464; } .button-657709b39c2d6.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-657709b39c2d6.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

DARK CERULEAN

.button-657709b39cb8d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39cb8d { background-color:#1265a8; } .button-657709b39cb8d:hover { background-color:#115e9c; } .button-657709b39cb8d.three-dimension { box-shadow: 0px 3px 0px 0px #0e5186; } .button-657709b39cb8d.three-dimension:active { box-shadow: 0px 1px 0px 0px #0e5186; }

LIGHT GRAY

.button-657709b39cc30 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39cc30 { background-color:#c9c9c9; } .button-657709b39cc30:hover { background-color:#bbbbbb; } .button-657709b39cc30.three-dimension { box-shadow: 0px 3px 0px 0px #a1a1a1; } .button-657709b39cc30.three-dimension:active { box-shadow: 0px 1px 0px 0px #a1a1a1; }

BOSTON UNIVERSITY RED

.button-657709b39ccf8 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39ccf8 { background-color:#c22525; } .button-657709b39ccf8:hover { background-color:#b42222; } .button-657709b39ccf8.three-dimension { box-shadow: 0px 3px 0px 0px #9b1e1e; } .button-657709b39ccf8.three-dimension:active { box-shadow: 0px 1px 0px 0px #9b1e1e; }

CADMIUM ORANGE

.button-657709b39cdcd { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39cdcd { background-color:#f58e18; } .button-657709b39cdcd:hover { background-color:#e48416; } .button-657709b39cdcd.three-dimension { box-shadow: 0px 3px 0px 0px #c47213; } .button-657709b39cdcd.three-dimension:active { box-shadow: 0px 1px 0px 0px #c47213; }

Android green

.button-657709b39ce9e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39ce9e { background-color:#59ba41; } .button-657709b39ce9e:hover { background-color:#53ad3c; } .button-657709b39ce9e.three-dimension { box-shadow: 0px 3px 0px 0px #479534; } .button-657709b39ce9e.three-dimension:active { box-shadow: 0px 1px 0px 0px #479534; }

3D buttons – Medium

FRESH AIR

.button-657709b39d1c1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d1c1 { background-color:#68cced; } .button-657709b39d1c1:hover { background-color:#61bedc; } .button-657709b39d1c1.three-dimension { box-shadow: 0px 3px 0px 0px #53a3be; } .button-657709b39d1c1.three-dimension:active { box-shadow: 0px 1px 0px 0px #53a3be; }

AMBER

.button-657709b39d299 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d299 { background-color:#e09a25; } .button-657709b39d299:hover { background-color:#d08f22; } .button-657709b39d299.three-dimension { box-shadow: 0px 3px 0px 0px #b37b1e; } .button-657709b39d299.three-dimension:active { box-shadow: 0px 1px 0px 0px #b37b1e; }

BONE

.button-657709b39d377 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d377 { background-color:#e2e0cf; } .button-657709b39d377:hover { background-color:#d2d0c1; } .button-657709b39d377.three-dimension { box-shadow: 0px 3px 0px 0px #b5b3a6; } .button-657709b39d377.three-dimension:active { box-shadow: 0px 1px 0px 0px #b5b3a6; }

CELADON GREEN

.button-657709b39d448 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d448 { background-color:#008b83; } .button-657709b39d448:hover { background-color:#00817a; } .button-657709b39d448.three-dimension { box-shadow: 0px 3px 0px 0px #006f69; } .button-657709b39d448.three-dimension:active { box-shadow: 0px 1px 0px 0px #006f69; }

CHARCOAL

.button-657709b39d514 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d514 { background-color:#3d4a57; } .button-657709b39d514:hover { background-color:#394551; } .button-657709b39d514.three-dimension { box-shadow: 0px 3px 0px 0px #313b46; } .button-657709b39d514.three-dimension:active { box-shadow: 0px 1px 0px 0px #313b46; }

3D buttons – Large

BRINK PINK

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

DARK BYZANTIUM

.button-657709b39d8c4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d8c4 { background-color:#5e5870; } .button-657709b39d8c4:hover { background-color:#575268; } .button-657709b39d8c4.three-dimension { box-shadow: 0px 3px 0px 0px #4b465a; } .button-657709b39d8c4.three-dimension:active { box-shadow: 0px 1px 0px 0px #4b465a; }

BITTER LEMON

.button-657709b39d98f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39d98f { background-color:#bfdb83; } .button-657709b39d98f:hover { background-color:#b2cc7a; } .button-657709b39d98f.three-dimension { box-shadow: 0px 3px 0px 0px #99af69; } .button-657709b39d98f.three-dimension:active { box-shadow: 0px 1px 0px 0px #99af69; }

CARIBBEAN GREEN

.button-657709b39da54 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39da54 { background-color:#49cdc8; } .button-657709b39da54:hover { background-color:#44bfba; } .button-657709b39da54.three-dimension { box-shadow: 0px 3px 0px 0px #3aa4a0; } .button-657709b39da54.three-dimension:active { box-shadow: 0px 1px 0px 0px #3aa4a0; }

DARK BROWN

.button-657709b39db1e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39db1e { background-color:#705146; } .button-657709b39db1e:hover { background-color:#684b41; } .button-657709b39db1e.three-dimension { box-shadow: 0px 3px 0px 0px #5a4138; } .button-657709b39db1e.three-dimension:active { box-shadow: 0px 1px 0px 0px #5a4138; }

Outline buttons

OUTLINE BUTTON SMALL

.button-657709b39de06 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }

OUTLINE BUTTON MEDIUM

.button-657709b39deca { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }

OUTLINE BUTTON LARGE

.button-657709b39df88 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }

2D buttons

2D buttons – Small

DARK CERULEAN

.button-657709b39e2d0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e2d0 { background-color:#1265a8; } .button-657709b39e2d0:hover { background-color:#115e9c; } .button-657709b39e2d0.three-dimension { box-shadow: 0px 3px 0px 0px #0e5186; } .button-657709b39e2d0.three-dimension:active { box-shadow: 0px 1px 0px 0px #0e5186; }

DARK GRAY

.button-657709b39e3ac { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e3ac { background-color:#c9c9c9; } .button-657709b39e3ac:hover { background-color:#bbbbbb; } .button-657709b39e3ac.three-dimension { box-shadow: 0px 3px 0px 0px #a1a1a1; } .button-657709b39e3ac.three-dimension:active { box-shadow: 0px 1px 0px 0px #a1a1a1; }

BOSTON UNIVERSITY RED

.button-657709b39e478 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e478 { background-color:#b42222; } .button-657709b39e478:hover { background-color:#a72020; } .button-657709b39e478.three-dimension { box-shadow: 0px 3px 0px 0px #901b1b; } .button-657709b39e478.three-dimension:active { box-shadow: 0px 1px 0px 0px #901b1b; }

CADMIUM ORANGE

.button-657709b39e541 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e541 { background-color:#f58e18; } .button-657709b39e541:hover { background-color:#e48416; } .button-657709b39e541.three-dimension { box-shadow: 0px 3px 0px 0px #c47213; } .button-657709b39e541.three-dimension:active { box-shadow: 0px 1px 0px 0px #c47213; }

ANDROID GREEN

.button-657709b39e606 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e606 { background-color:#59ba41; } .button-657709b39e606:hover { background-color:#53ad3c; } .button-657709b39e606.three-dimension { box-shadow: 0px 3px 0px 0px #479534; } .button-657709b39e606.three-dimension:active { box-shadow: 0px 1px 0px 0px #479534; }

2D buttons – Medium

FRESH AIR

.button-657709b39e8ce { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e8ce { background-color:#68cced; } .button-657709b39e8ce:hover { background-color:#61bedc; } .button-657709b39e8ce.three-dimension { box-shadow: 0px 3px 0px 0px #53a3be; } .button-657709b39e8ce.three-dimension:active { box-shadow: 0px 1px 0px 0px #53a3be; }

AMBER

.button-657709b39e98a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39e98a { background-color:#e09a25; } .button-657709b39e98a:hover { background-color:#d08f22; } .button-657709b39e98a.three-dimension { box-shadow: 0px 3px 0px 0px #b37b1e; } .button-657709b39e98a.three-dimension:active { box-shadow: 0px 1px 0px 0px #b37b1e; }

BONE

.button-657709b39ea64 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39ea64 { background-color:#e2e0cf; } .button-657709b39ea64:hover { background-color:#d2d0c1; } .button-657709b39ea64.three-dimension { box-shadow: 0px 3px 0px 0px #b5b3a6; } .button-657709b39ea64.three-dimension:active { box-shadow: 0px 1px 0px 0px #b5b3a6; }

CELADON GREEN

.button-657709b39eb2d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39eb2d { background-color:#008b83; } .button-657709b39eb2d:hover { background-color:#00817a; } .button-657709b39eb2d.three-dimension { box-shadow: 0px 3px 0px 0px #006f69; } .button-657709b39eb2d.three-dimension:active { box-shadow: 0px 1px 0px 0px #006f69; }

CHARCOAL

.button-657709b39ebfb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39ebfb { background-color:#3d4a57; } .button-657709b39ebfb:hover { background-color:#394551; } .button-657709b39ebfb.three-dimension { box-shadow: 0px 3px 0px 0px #313b46; } .button-657709b39ebfb.three-dimension:active { box-shadow: 0px 1px 0px 0px #313b46; }

2D buttons – Large

BRINK PINK

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

DARK BYZANTIUM

.button-657709b39efa8 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39efa8 { background-color:#5e5870; } .button-657709b39efa8:hover { background-color:#575268; } .button-657709b39efa8.three-dimension { box-shadow: 0px 3px 0px 0px #4b465a; } .button-657709b39efa8.three-dimension:active { box-shadow: 0px 1px 0px 0px #4b465a; }

BITTER LEMON

.button-657709b39f077 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39f077 { background-color:#b7e05e; } .button-657709b39f077:hover { background-color:#aad057; } .button-657709b39f077.three-dimension { box-shadow: 0px 3px 0px 0px #92b34b; } .button-657709b39f077.three-dimension:active { box-shadow: 0px 1px 0px 0px #92b34b; }

CARRIBEAN GREEN

.button-657709b39f149 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39f149 { background-color:#49cdc8; } .button-657709b39f149:hover { background-color:#44bfba; } .button-657709b39f149.three-dimension { box-shadow: 0px 3px 0px 0px #3aa4a0; } .button-657709b39f149.three-dimension:active { box-shadow: 0px 1px 0px 0px #3aa4a0; }

DARK BROWN

.button-657709b39f21b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-657709b39f21b { background-color:#705146; } .button-657709b39f21b:hover { background-color:#684b41; } .button-657709b39f21b.three-dimension { box-shadow: 0px 3px 0px 0px #5a4138; } .button-657709b39f21b.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-657709b39f780 p{color:#404b57;}#box-icon-657709b39f780 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-657709b39f93d p{color:#404b57;}#box-icon-657709b39f93d 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-657709b39fafa p{color:#404b57;}#box-icon-657709b39fafa h4 {color:#ffffff!important;}

.full-width-657709b39f4bb { 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--657709b39f4bb { background-position:left top; background-repeat:repeat; ; } .full-width-657709b39f4bb .mk-fancy-title.pattern-style span, .full-width-657709b39f4bb .mk-blog-view-all { background-color: #00c8d7 !important; }