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-5d83248ab2999 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab2999 { background-color:#ff6b6b; } .button-5d83248ab2999:hover { background-color:#ed6464; } .button-5d83248ab2999.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab2999.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5d83248ab2c1a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab2c1a { background-color:#ff6b6b; } .button-5d83248ab2c1a:hover { background-color:#ed6464; } .button-5d83248ab2c1a.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab2c1a.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5d83248ab2e15 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab2e15 { background-color:#ff6b6b; } .button-5d83248ab2e15:hover { background-color:#ed6464; } .button-5d83248ab2e15.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab2e15.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5d83248ab2fed { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab2fed { background-color:#ff6b6b; } .button-5d83248ab2fed:hover { background-color:#ed6464; } .button-5d83248ab2fed.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab2fed.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5d83248ab3211 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab3211 { background-color:#ff6b6b; } .button-5d83248ab3211:hover { background-color:#ed6464; } .button-5d83248ab3211.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab3211.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5d83248ab3d20 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab3d20 { background-color:#ff6b6b; } .button-5d83248ab3d20:hover { background-color:#ed6464; } .button-5d83248ab3d20.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5d83248ab3d20.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-5d83248ab6588 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab6588 { background-color:#978eb4; } .button-5d83248ab6588:hover { background-color:#8c84a7; } .button-5d83248ab6588.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab6588.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5d83248ab73cf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab73cf { background-color:#978eb4; } .button-5d83248ab73cf:hover { background-color:#8c84a7; } .button-5d83248ab73cf.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab73cf.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5d83248ab760f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab760f { background-color:#978eb4; } .button-5d83248ab760f:hover { background-color:#8c84a7; } .button-5d83248ab760f.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab760f.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5d83248ab780a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab780a { background-color:#978eb4; } .button-5d83248ab780a:hover { background-color:#8c84a7; } .button-5d83248ab780a.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab780a.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5d83248ab7a1e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab7a1e { background-color:#978eb4; } .button-5d83248ab7a1e:hover { background-color:#8c84a7; } .button-5d83248ab7a1e.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab7a1e.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5d83248ab7c05 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ab7c05 { background-color:#978eb4; } .button-5d83248ab7c05:hover { background-color:#8c84a7; } .button-5d83248ab7c05.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5d83248ab7c05.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-5d83248abafbb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abafbb { background-color:#57c8c3; } .mk-button.button-5d83248abafbb.flat-dimension:hover { background-color:#252525 !important; }
.button-5d83248abb400 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abb400 { background-color:#57c8c3; } .mk-button.button-5d83248abb400.flat-dimension:hover { background-color:#252525 !important; }
.button-5d83248abbb8f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abbb8f { background-color:#57c8c3; } .mk-button.button-5d83248abbb8f.flat-dimension:hover { background-color:#252525 !important; }
.button-5d83248abc111 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abc111 { background-color:#57c8c3; } .mk-button.button-5d83248abc111.flat-dimension:hover { background-color:#252525 !important; }
.button-5d83248abca7a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abca7a { background-color:#57c8c3; } .mk-button.button-5d83248abca7a.flat-dimension:hover { background-color:#252525 !important; }
.button-5d83248abcc5c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248abcc5c { background-color:#57c8c3; } .mk-button.button-5d83248abcc5c.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-5d83248abfb15 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248abfcce { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ac0281 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ac044d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ac05fe { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ac100a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ad63e7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248ad667d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ad667d { border-color: #71d3cf !important; color: #71d3cf; } .button-5d83248ad667d:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-5d83248ad667d:hover i { color: #444444; }
.button-5d83248ad689e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ad689e { border-color: #e6d459 !important; color: #e6d459; } .button-5d83248ad689e:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-5d83248ad689e:hover i { color: #444444; }
.button-5d83248ad6a51 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ad6a51 { border-color: #5adff3 !important; color: #5adff3; } .button-5d83248ad6a51:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-5d83248ad6a51:hover i { color: #444444; }
.button-5d83248ad7450 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ad7450 { border-color: #b3e24e !important; color: #b3e24e; } .button-5d83248ad7450:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-5d83248ad7450:hover i { color: #333333; }
.button-5d83248ad767d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ad767d { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5d83248ad767d:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-5d83248ad767d:hover i { color: #444444; }
#mk-custom-box-5d83248ad4a1c { 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-5d83248ad4a1c .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5d83248ac1fa9 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5d83248ac1fa9 { background-position:left top; background-repeat:repeat; ; } .full-width-5d83248ac1fa9 .mk-fancy-title.pattern-style span, .full-width-5d83248ac1fa9 .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-5d83248ada578 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adaada { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adb1e4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adb3de { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adbdbf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adbfc2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adedc6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5d83248adf625 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248adf625 { border-color: #71d3cf !important; color: #71d3cf; } .button-5d83248adf625:after { background-color:#71d3cf; } .button-5d83248adf625:hover { border-color: !important; color: #444444 !important; } .button-5d83248adf625:hover:after { background-color:; } .button-5d83248adf625:hover i { color: #444444; }
.button-5d83248ae0410 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ae0410 { border-color: #e6d459 !important; color: #e6d459; } .button-5d83248ae0410:after { background-color:#e6d459; } .button-5d83248ae0410:hover { border-color: !important; color: #444444 !important; } .button-5d83248ae0410:hover:after { background-color:; } .button-5d83248ae0410:hover i { color: #444444; }
.button-5d83248ae0651 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ae0651 { border-color: #5adff3 !important; color: #5adff3; } .button-5d83248ae0651:after { background-color:#5adff3; } .button-5d83248ae0651:hover { border-color: !important; color: #444444 !important; } .button-5d83248ae0651:hover:after { background-color:; } .button-5d83248ae0651:hover i { color: #444444; }
.button-5d83248ae0857 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ae0857 { border-color: #b3e24e !important; color: #b3e24e; } .button-5d83248ae0857:after { background-color:#b3e24e; } .button-5d83248ae0857:hover { border-color: !important; color: #333333 !important; } .button-5d83248ae0857:hover:after { background-color:; } .button-5d83248ae0857:hover i { color: #333333; }
.button-5d83248ae0a1f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5d83248ae0a1f { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5d83248ae0a1f:after { background-color:#ff6b6b; } .button-5d83248ae0a1f:hover { border-color: !important; color: #444444 !important; } .button-5d83248ae0a1f:hover:after { background-color:; } .button-5d83248ae0a1f:hover i { color: #444444; }
#mk-custom-box-5d83248adde09 { 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-5d83248adde09 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5d83248adc914 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5d83248adc914 { background-position:left top; background-repeat:repeat; ; } .full-width-5d83248adc914 .mk-fancy-title.pattern-style span, .full-width-5d83248adc914 .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search