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-5c462bbf03362 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf03362 { background-color:#ff6b6b; } .button-5c462bbf03362:hover { background-color:#ed6464; } .button-5c462bbf03362.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf03362.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5c462bbf0354a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0354a { background-color:#ff6b6b; } .button-5c462bbf0354a:hover { background-color:#ed6464; } .button-5c462bbf0354a.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf0354a.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5c462bbf03721 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf03721 { background-color:#ff6b6b; } .button-5c462bbf03721:hover { background-color:#ed6464; } .button-5c462bbf03721.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf03721.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5c462bbf038d0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf038d0 { background-color:#ff6b6b; } .button-5c462bbf038d0:hover { background-color:#ed6464; } .button-5c462bbf038d0.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf038d0.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5c462bbf03aa1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf03aa1 { background-color:#ff6b6b; } .button-5c462bbf03aa1:hover { background-color:#ed6464; } .button-5c462bbf03aa1.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf03aa1.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5c462bbf03c65 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf03c65 { background-color:#ff6b6b; } .button-5c462bbf03c65:hover { background-color:#ed6464; } .button-5c462bbf03c65.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5c462bbf03c65.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-5c462bbf04fbf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf04fbf { background-color:#978eb4; } .button-5c462bbf04fbf:hover { background-color:#8c84a7; } .button-5c462bbf04fbf.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf04fbf.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5c462bbf0519b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0519b { background-color:#978eb4; } .button-5c462bbf0519b:hover { background-color:#8c84a7; } .button-5c462bbf0519b.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf0519b.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5c462bbf0538b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0538b { background-color:#978eb4; } .button-5c462bbf0538b:hover { background-color:#8c84a7; } .button-5c462bbf0538b.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf0538b.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5c462bbf05581 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf05581 { background-color:#978eb4; } .button-5c462bbf05581:hover { background-color:#8c84a7; } .button-5c462bbf05581.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf05581.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5c462bbf05748 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf05748 { background-color:#978eb4; } .button-5c462bbf05748:hover { background-color:#8c84a7; } .button-5c462bbf05748.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf05748.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5c462bbf0595b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0595b { background-color:#978eb4; } .button-5c462bbf0595b:hover { background-color:#8c84a7; } .button-5c462bbf0595b.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5c462bbf0595b.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-5c462bbf0716e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0716e { background-color:#57c8c3; } .mk-button.button-5c462bbf0716e.flat-dimension:hover { background-color:#252525 !important; }
.button-5c462bbf073e1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf073e1 { background-color:#57c8c3; } .mk-button.button-5c462bbf073e1.flat-dimension:hover { background-color:#252525 !important; }
.button-5c462bbf075e9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf075e9 { background-color:#57c8c3; } .mk-button.button-5c462bbf075e9.flat-dimension:hover { background-color:#252525 !important; }
.button-5c462bbf077c9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf077c9 { background-color:#57c8c3; } .mk-button.button-5c462bbf077c9.flat-dimension:hover { background-color:#252525 !important; }
.button-5c462bbf079c7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf079c7 { background-color:#57c8c3; } .mk-button.button-5c462bbf079c7.flat-dimension:hover { background-color:#252525 !important; }
.button-5c462bbf07b8c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf07b8c { background-color:#57c8c3; } .mk-button.button-5c462bbf07b8c.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-5c462bbf095dc { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0978b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0992f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf09af2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf09d74 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0a006 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0bcea { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0bf78 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0bf78 { border-color: #71d3cf !important; color: #71d3cf; } .button-5c462bbf0bf78:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-5c462bbf0bf78:hover i { color: #444444; }
.button-5c462bbf0c1f2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0c1f2 { border-color: #e6d459 !important; color: #e6d459; } .button-5c462bbf0c1f2:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-5c462bbf0c1f2:hover i { color: #444444; }
.button-5c462bbf0c484 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0c484 { border-color: #5adff3 !important; color: #5adff3; } .button-5c462bbf0c484:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-5c462bbf0c484:hover i { color: #444444; }
.button-5c462bbf0c6da { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0c6da { border-color: #b3e24e !important; color: #b3e24e; } .button-5c462bbf0c6da:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-5c462bbf0c6da:hover i { color: #333333; }
.button-5c462bbf0c88e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0c88e { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5c462bbf0c88e:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-5c462bbf0c88e:hover i { color: #444444; }
#mk-custom-box-5c462bbf0b3aa { 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-5c462bbf0b3aa .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5c462bbf0a9d9 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5c462bbf0a9d9 { background-position:left top; background-repeat:repeat; ; } .full-width-5c462bbf0a9d9 .mk-fancy-title.pattern-style span, .full-width-5c462bbf0a9d9 .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-5c462bbf0dd59 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0df0e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0e0ac { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0e268 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0e40c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0e5bb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0f95c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5c462bbf0fb0e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0fb0e { border-color: #71d3cf !important; color: #71d3cf; } .button-5c462bbf0fb0e:after { background-color:#71d3cf; } .button-5c462bbf0fb0e:hover { border-color: !important; color: #444444 !important; } .button-5c462bbf0fb0e:hover:after { background-color:; } .button-5c462bbf0fb0e:hover i { color: #444444; }
.button-5c462bbf0fce6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0fce6 { border-color: #e6d459 !important; color: #e6d459; } .button-5c462bbf0fce6:after { background-color:#e6d459; } .button-5c462bbf0fce6:hover { border-color: !important; color: #444444 !important; } .button-5c462bbf0fce6:hover:after { background-color:; } .button-5c462bbf0fce6:hover i { color: #444444; }
.button-5c462bbf0fea9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf0fea9 { border-color: #5adff3 !important; color: #5adff3; } .button-5c462bbf0fea9:after { background-color:#5adff3; } .button-5c462bbf0fea9:hover { border-color: !important; color: #444444 !important; } .button-5c462bbf0fea9:hover:after { background-color:; } .button-5c462bbf0fea9:hover i { color: #444444; }
.button-5c462bbf1006d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf1006d { border-color: #b3e24e !important; color: #b3e24e; } .button-5c462bbf1006d:after { background-color:#b3e24e; } .button-5c462bbf1006d:hover { border-color: !important; color: #333333 !important; } .button-5c462bbf1006d:hover:after { background-color:; } .button-5c462bbf1006d:hover i { color: #333333; }
.button-5c462bbf1022a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5c462bbf1022a { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5c462bbf1022a:after { background-color:#ff6b6b; } .button-5c462bbf1022a:hover { border-color: !important; color: #444444 !important; } .button-5c462bbf1022a:hover:after { background-color:; } .button-5c462bbf1022a:hover i { color: #444444; }
#mk-custom-box-5c462bbf0f320 { 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-5c462bbf0f320 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5c462bbf0eb53 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5c462bbf0eb53 { background-position:left top; background-repeat:repeat; ; } .full-width-5c462bbf0eb53 .mk-fancy-title.pattern-style span, .full-width-5c462bbf0eb53 .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search