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-5972f4b1c7266 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c7266 { background-color:#ff6b6b; } .button-5972f4b1c7266:hover { background-color:#ed6464; } .button-5972f4b1c7266.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c7266.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5972f4b1c7479 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c7479 { background-color:#ff6b6b; } .button-5972f4b1c7479:hover { background-color:#ed6464; } .button-5972f4b1c7479.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c7479.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5972f4b1c77eb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c77eb { background-color:#ff6b6b; } .button-5972f4b1c77eb:hover { background-color:#ed6464; } .button-5972f4b1c77eb.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c77eb.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5972f4b1c79f5 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c79f5 { background-color:#ff6b6b; } .button-5972f4b1c79f5:hover { background-color:#ed6464; } .button-5972f4b1c79f5.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c79f5.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5972f4b1c7c00 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c7c00 { background-color:#ff6b6b; } .button-5972f4b1c7c00:hover { background-color:#ed6464; } .button-5972f4b1c7c00.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c7c00.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5972f4b1c7df1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c7df1 { background-color:#ff6b6b; } .button-5972f4b1c7df1:hover { background-color:#ed6464; } .button-5972f4b1c7df1.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5972f4b1c7df1.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-5972f4b1c92e4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c92e4 { background-color:#978eb4; } .button-5972f4b1c92e4:hover { background-color:#8c84a7; } .button-5972f4b1c92e4.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c92e4.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5972f4b1c94d3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c94d3 { background-color:#978eb4; } .button-5972f4b1c94d3:hover { background-color:#8c84a7; } .button-5972f4b1c94d3.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c94d3.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5972f4b1c96d1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c96d1 { background-color:#978eb4; } .button-5972f4b1c96d1:hover { background-color:#8c84a7; } .button-5972f4b1c96d1.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c96d1.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5972f4b1c98c3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c98c3 { background-color:#978eb4; } .button-5972f4b1c98c3:hover { background-color:#8c84a7; } .button-5972f4b1c98c3.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c98c3.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5972f4b1c9ae2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c9ae2 { background-color:#978eb4; } .button-5972f4b1c9ae2:hover { background-color:#8c84a7; } .button-5972f4b1c9ae2.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c9ae2.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5972f4b1c9cd3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1c9cd3 { background-color:#978eb4; } .button-5972f4b1c9cd3:hover { background-color:#8c84a7; } .button-5972f4b1c9cd3.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5972f4b1c9cd3.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-5972f4b1cb192 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cb192 { background-color:#57c8c3; } .mk-button.button-5972f4b1cb192.flat-dimension:hover { background-color:#252525 !important; }
.button-5972f4b1cb391 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cb391 { background-color:#57c8c3; } .mk-button.button-5972f4b1cb391.flat-dimension:hover { background-color:#252525 !important; }
.button-5972f4b1cb5d0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cb5d0 { background-color:#57c8c3; } .mk-button.button-5972f4b1cb5d0.flat-dimension:hover { background-color:#252525 !important; }
.button-5972f4b1cb7e6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cb7e6 { background-color:#57c8c3; } .mk-button.button-5972f4b1cb7e6.flat-dimension:hover { background-color:#252525 !important; }
.button-5972f4b1cb9d6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cb9d6 { background-color:#57c8c3; } .mk-button.button-5972f4b1cb9d6.flat-dimension:hover { background-color:#252525 !important; }
.button-5972f4b1cbbb6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cbbb6 { background-color:#57c8c3; } .mk-button.button-5972f4b1cbbb6.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-5972f4b1cd11d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cd2ef { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cd4ea { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cd6b7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cd89c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cda6a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cf10f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1cf2e9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cf2e9 { border-color: #71d3cf !important; color: #71d3cf; } .button-5972f4b1cf2e9:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-5972f4b1cf2e9:hover i { color: #444444; }
.button-5972f4b1cf4d7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cf4d7 { border-color: #e6d459 !important; color: #e6d459; } .button-5972f4b1cf4d7:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-5972f4b1cf4d7:hover i { color: #444444; }
.button-5972f4b1cf6b5 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cf6b5 { border-color: #5adff3 !important; color: #5adff3; } .button-5972f4b1cf6b5:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-5972f4b1cf6b5:hover i { color: #444444; }
.button-5972f4b1cf8c1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cf8c1 { border-color: #b3e24e !important; color: #b3e24e; } .button-5972f4b1cf8c1:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-5972f4b1cf8c1:hover i { color: #333333; }
.button-5972f4b1cfaa2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1cfaa2 { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5972f4b1cfaa2:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-5972f4b1cfaa2:hover i { color: #444444; }
#mk-custom-box-5972f4b1ceab4 { 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-5972f4b1ceab4 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5972f4b1ce1c5 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5972f4b1ce1c5 { background-position:left top; background-repeat:repeat; ; } .full-width-5972f4b1ce1c5 .mk-fancy-title.pattern-style span, .full-width-5972f4b1ce1c5 .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-5972f4b1d0f21 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d10f3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d12cd { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d149d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d166c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d1836 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d2c5d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5972f4b1d2e3b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1d2e3b { border-color: #71d3cf !important; color: #71d3cf; } .button-5972f4b1d2e3b:after { background-color:#71d3cf; } .button-5972f4b1d2e3b:hover { border-color: !important; color: #444444 !important; } .button-5972f4b1d2e3b:hover:after { background-color:; } .button-5972f4b1d2e3b:hover i { color: #444444; }
.button-5972f4b1d3017 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1d3017 { border-color: #e6d459 !important; color: #e6d459; } .button-5972f4b1d3017:after { background-color:#e6d459; } .button-5972f4b1d3017:hover { border-color: !important; color: #444444 !important; } .button-5972f4b1d3017:hover:after { background-color:; } .button-5972f4b1d3017:hover i { color: #444444; }
.button-5972f4b1d3217 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1d3217 { border-color: #5adff3 !important; color: #5adff3; } .button-5972f4b1d3217:after { background-color:#5adff3; } .button-5972f4b1d3217:hover { border-color: !important; color: #444444 !important; } .button-5972f4b1d3217:hover:after { background-color:; } .button-5972f4b1d3217:hover i { color: #444444; }
.button-5972f4b1d341f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1d341f { border-color: #b3e24e !important; color: #b3e24e; } .button-5972f4b1d341f:after { background-color:#b3e24e; } .button-5972f4b1d341f:hover { border-color: !important; color: #333333 !important; } .button-5972f4b1d341f:hover:after { background-color:; } .button-5972f4b1d341f:hover i { color: #333333; }
.button-5972f4b1d3613 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5972f4b1d3613 { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5972f4b1d3613:after { background-color:#ff6b6b; } .button-5972f4b1d3613:hover { border-color: !important; color: #444444 !important; } .button-5972f4b1d3613:hover:after { background-color:; } .button-5972f4b1d3613:hover i { color: #444444; }
#mk-custom-box-5972f4b1d2651 { 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-5972f4b1d2651 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5972f4b1d1e2c { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5972f4b1d1e2c { background-position:left top; background-repeat:repeat; ; } .full-width-5972f4b1d1e2c .mk-fancy-title.pattern-style span, .full-width-5972f4b1d1e2c .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search