Buttons

5 customisable buttons

Choose between 5 beautiful and animated button styles with customise features such as corner radius and button hover color.

3D Buttons

.button-5f0d07f88ad3d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88ad3d { background-color:#ff6b6b; } .button-5f0d07f88ad3d:hover { background-color:#ed6464; } .button-5f0d07f88ad3d.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88ad3d.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5f0d07f88afe7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88afe7 { background-color:#ff6b6b; } .button-5f0d07f88afe7:hover { background-color:#ed6464; } .button-5f0d07f88afe7.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88afe7.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5f0d07f88b205 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88b205 { background-color:#ff6b6b; } .button-5f0d07f88b205:hover { background-color:#ed6464; } .button-5f0d07f88b205.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88b205.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5f0d07f88b46a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88b46a { background-color:#ff6b6b; } .button-5f0d07f88b46a:hover { background-color:#ed6464; } .button-5f0d07f88b46a.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88b46a.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5f0d07f88b691 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88b691 { background-color:#ff6b6b; } .button-5f0d07f88b691:hover { background-color:#ed6464; } .button-5f0d07f88b691.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88b691.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5f0d07f88b86c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88b86c { background-color:#ff6b6b; } .button-5f0d07f88b86c:hover { background-color:#ed6464; } .button-5f0d07f88b86c.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f88b86c.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-5f0d07f88d144 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88d144 { background-color:#978eb4; } .button-5f0d07f88d144:hover { background-color:#8c84a7; } .button-5f0d07f88d144.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88d144.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5f0d07f88d35a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88d35a { background-color:#978eb4; } .button-5f0d07f88d35a:hover { background-color:#8c84a7; } .button-5f0d07f88d35a.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88d35a.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5f0d07f88d596 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88d596 { background-color:#978eb4; } .button-5f0d07f88d596:hover { background-color:#8c84a7; } .button-5f0d07f88d596.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88d596.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5f0d07f88d790 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88d790 { background-color:#978eb4; } .button-5f0d07f88d790:hover { background-color:#8c84a7; } .button-5f0d07f88d790.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88d790.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5f0d07f88d9b7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88d9b7 { background-color:#978eb4; } .button-5f0d07f88d9b7:hover { background-color:#8c84a7; } .button-5f0d07f88d9b7.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88d9b7.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5f0d07f88dc1f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88dc1f { background-color:#978eb4; } .button-5f0d07f88dc1f:hover { background-color:#8c84a7; } .button-5f0d07f88dc1f.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5f0d07f88dc1f.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-5f0d07f88f27d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88f27d { background-color:#57c8c3; } .mk-button.button-5f0d07f88f27d.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f88f46f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88f46f { background-color:#57c8c3; } .mk-button.button-5f0d07f88f46f.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f88f64a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88f64a { background-color:#57c8c3; } .mk-button.button-5f0d07f88f64a.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f88f8ba { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88f8ba { background-color:#57c8c3; } .mk-button.button-5f0d07f88f8ba.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f88fa94 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88fa94 { background-color:#57c8c3; } .mk-button.button-5f0d07f88fa94.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f88fcc7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f88fcc7 { background-color:#57c8c3; } .mk-button.button-5f0d07f88fcc7.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-5f0d07f891701 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f8918d9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f891acf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f891cd4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f891f02 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f89211d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f893c15 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f893dcc { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f893dcc { border-color: #71d3cf !important; color: #71d3cf; } .button-5f0d07f893dcc:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-5f0d07f893dcc:hover i { color: #444444; }
.button-5f0d07f893f95 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f893f95 { border-color: #e6d459 !important; color: #e6d459; } .button-5f0d07f893f95:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-5f0d07f893f95:hover i { color: #444444; }
.button-5f0d07f894158 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f894158 { border-color: #5adff3 !important; color: #5adff3; } .button-5f0d07f894158:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-5f0d07f894158:hover i { color: #444444; }
.button-5f0d07f89432f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f89432f { border-color: #b3e24e !important; color: #b3e24e; } .button-5f0d07f89432f:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-5f0d07f89432f:hover i { color: #333333; }
.button-5f0d07f8944e5 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f8944e5 { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5f0d07f8944e5:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-5f0d07f8944e5:hover i { color: #444444; }
#mk-custom-box-5f0d07f89359f { min-height:100px; padding:40px 40px; background-attachment:scroll; background-repeat:repeat; background-color:#555555; background-position:left top; margin-bottom:0px; } #mk-custom-box-5f0d07f89359f .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5f0d07f892a3d { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5f0d07f892a3d { background-position:left top; background-repeat:repeat; ; } .full-width-5f0d07f892a3d .mk-fancy-title.pattern-style span, .full-width-5f0d07f892a3d .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-5f0d07f895938 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f895b03 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f895d26 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f895f18 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f896101 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f896336 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f897b27 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5f0d07f897d24 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f897d24 { border-color: #71d3cf !important; color: #71d3cf; } .button-5f0d07f897d24:after { background-color:#71d3cf; } .button-5f0d07f897d24:hover { border-color: !important; color: #444444 !important; } .button-5f0d07f897d24:hover:after { background-color:; } .button-5f0d07f897d24:hover i { color: #444444; }
.button-5f0d07f897eff { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f897eff { border-color: #e6d459 !important; color: #e6d459; } .button-5f0d07f897eff:after { background-color:#e6d459; } .button-5f0d07f897eff:hover { border-color: !important; color: #444444 !important; } .button-5f0d07f897eff:hover:after { background-color:; } .button-5f0d07f897eff:hover i { color: #444444; }
.button-5f0d07f898136 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f898136 { border-color: #5adff3 !important; color: #5adff3; } .button-5f0d07f898136:after { background-color:#5adff3; } .button-5f0d07f898136:hover { border-color: !important; color: #444444 !important; } .button-5f0d07f898136:hover:after { background-color:; } .button-5f0d07f898136:hover i { color: #444444; }
.button-5f0d07f898313 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f898313 { border-color: #b3e24e !important; color: #b3e24e; } .button-5f0d07f898313:after { background-color:#b3e24e; } .button-5f0d07f898313:hover { border-color: !important; color: #333333 !important; } .button-5f0d07f898313:hover:after { background-color:; } .button-5f0d07f898313:hover i { color: #333333; }
.button-5f0d07f8984fa { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f8984fa { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5f0d07f8984fa:after { background-color:#ff6b6b; } .button-5f0d07f8984fa:hover { border-color: !important; color: #444444 !important; } .button-5f0d07f8984fa:hover:after { background-color:; } .button-5f0d07f8984fa:hover i { color: #444444; }
#mk-custom-box-5f0d07f897467 { min-height:100px; padding:40px 40px; background-attachment:scroll; background-repeat:repeat; background-color:#555555; background-position:left top; margin-bottom:0px; } #mk-custom-box-5f0d07f897467 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5f0d07f896aa2 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5f0d07f896aa2 { background-position:left top; background-repeat:repeat; ; } .full-width-5f0d07f896aa2 .mk-fancy-title.pattern-style span, .full-width-5f0d07f896aa2 .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

.button-5f0d07f89998e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f89998e { border-color: #2c7fb1 !important; color: #2c7fb1; } .button-5f0d07f89998e:hover { background-color:#2c7fb1 !important; color: #ffffff !important; } .button-5f0d07f89998e:hover i { color: #ffffff; }
.button-5f0d07f899b29 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f899b29 { background-color:#57c8c3; } .mk-button.button-5f0d07f899b29.flat-dimension:hover { background-color:#252525 !important; }
.button-5f0d07f899d14 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5f0d07f899d14 { background-color:#ff6b6b; } .button-5f0d07f899d14:hover { background-color:#ed6464; } .button-5f0d07f899d14.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5f0d07f899d14.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
联系我们

我们期待听到您的声音,有任何疑问,请直接填写后发送给我们,我将尽快于您取得联系。谢谢您的关注!

Not readable? Change text. captcha txt

Start typing and press Enter to search