.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
.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; }
.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; }
.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; }
.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; }
.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
.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; }
.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; }
.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; }
.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; }
.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
.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; }
.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; }
.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; }
.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; }
.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
.button-657709b39de06 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-657709b39deca { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-657709b39df88 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
2D buttons
2D buttons – Small
.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; }
.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; }
.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; }
.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; }
.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
.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; }
.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; }
.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; }
.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; }
.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
.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; }
.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; }
.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; }
.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; }
.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; }