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-5a0f3456839de { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456839de { background-color:#ff6b6b; } .button-5a0f3456839de:hover { background-color:#ed6464; } .button-5a0f3456839de.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f3456839de.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5a0f345683aed { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345683aed { background-color:#ff6b6b; } .button-5a0f345683aed:hover { background-color:#ed6464; } .button-5a0f345683aed.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f345683aed.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5a0f345683bdc { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345683bdc { background-color:#ff6b6b; } .button-5a0f345683bdc:hover { background-color:#ed6464; } .button-5a0f345683bdc.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f345683bdc.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5a0f345683cc9 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345683cc9 { background-color:#ff6b6b; } .button-5a0f345683cc9:hover { background-color:#ed6464; } .button-5a0f345683cc9.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f345683cc9.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5a0f345683dc4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345683dc4 { background-color:#ff6b6b; } .button-5a0f345683dc4:hover { background-color:#ed6464; } .button-5a0f345683dc4.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f345683dc4.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-5a0f345683eb3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345683eb3 { background-color:#ff6b6b; } .button-5a0f345683eb3:hover { background-color:#ed6464; } .button-5a0f345683eb3.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-5a0f345683eb3.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-5a0f345684c51 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345684c51 { background-color:#978eb4; } .button-5a0f345684c51:hover { background-color:#8c84a7; } .button-5a0f345684c51.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345684c51.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5a0f345684d5a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345684d5a { background-color:#978eb4; } .button-5a0f345684d5a:hover { background-color:#8c84a7; } .button-5a0f345684d5a.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345684d5a.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5a0f345684e4f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345684e4f { background-color:#978eb4; } .button-5a0f345684e4f:hover { background-color:#8c84a7; } .button-5a0f345684e4f.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345684e4f.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5a0f345684f40 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345684f40 { background-color:#978eb4; } .button-5a0f345684f40:hover { background-color:#8c84a7; } .button-5a0f345684f40.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345684f40.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5a0f345685033 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345685033 { background-color:#978eb4; } .button-5a0f345685033:hover { background-color:#8c84a7; } .button-5a0f345685033.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345685033.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-5a0f345685134 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345685134 { background-color:#978eb4; } .button-5a0f345685134:hover { background-color:#8c84a7; } .button-5a0f345685134.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-5a0f345685134.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-5a0f345685f0b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345685f0b { background-color:#57c8c3; } .mk-button.button-5a0f345685f0b.flat-dimension:hover { background-color:#252525 !important; }
.button-5a0f345685ff7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345685ff7 { background-color:#57c8c3; } .mk-button.button-5a0f345685ff7.flat-dimension:hover { background-color:#252525 !important; }
.button-5a0f3456860df { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456860df { background-color:#57c8c3; } .mk-button.button-5a0f3456860df.flat-dimension:hover { background-color:#252525 !important; }
.button-5a0f3456861b5 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456861b5 { background-color:#57c8c3; } .mk-button.button-5a0f3456861b5.flat-dimension:hover { background-color:#252525 !important; }
.button-5a0f345686294 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345686294 { background-color:#57c8c3; } .mk-button.button-5a0f345686294.flat-dimension:hover { background-color:#252525 !important; }
.button-5a0f34568636b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568636b { background-color:#57c8c3; } .mk-button.button-5a0f34568636b.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-5a0f345687114 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f3456871fb { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f3456872d1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f3456873a8 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f34568748c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f345687563 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f345688320 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f3456883fe { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456883fe { border-color: #71d3cf !important; color: #71d3cf; } .button-5a0f3456883fe:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-5a0f3456883fe:hover i { color: #444444; }
.button-5a0f3456884dc { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456884dc { border-color: #e6d459 !important; color: #e6d459; } .button-5a0f3456884dc:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-5a0f3456884dc:hover i { color: #444444; }
.button-5a0f3456885bf { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f3456885bf { border-color: #5adff3 !important; color: #5adff3; } .button-5a0f3456885bf:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-5a0f3456885bf:hover i { color: #444444; }
.button-5a0f345688698 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f345688698 { border-color: #b3e24e !important; color: #b3e24e; } .button-5a0f345688698:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-5a0f345688698:hover i { color: #333333; }
.button-5a0f34568875a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568875a { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5a0f34568875a:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-5a0f34568875a:hover i { color: #444444; }
#mk-custom-box-5a0f345687f15 { 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-5a0f345687f15 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5a0f3456878d4 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5a0f3456878d4 { background-position:left top; background-repeat:repeat; ; } .full-width-5a0f3456878d4 .mk-fancy-title.pattern-style span, .full-width-5a0f3456878d4 .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-5a0f3456894e2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f3456895c3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f345689697 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f345689772 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f345689842 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f34568991d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f34568a572 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-5a0f34568a644 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568a644 { border-color: #71d3cf !important; color: #71d3cf; } .button-5a0f34568a644:after { background-color:#71d3cf; } .button-5a0f34568a644:hover { border-color: !important; color: #444444 !important; } .button-5a0f34568a644:hover:after { background-color:; } .button-5a0f34568a644:hover i { color: #444444; }
.button-5a0f34568a738 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568a738 { border-color: #e6d459 !important; color: #e6d459; } .button-5a0f34568a738:after { background-color:#e6d459; } .button-5a0f34568a738:hover { border-color: !important; color: #444444 !important; } .button-5a0f34568a738:hover:after { background-color:; } .button-5a0f34568a738:hover i { color: #444444; }
.button-5a0f34568a81d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568a81d { border-color: #5adff3 !important; color: #5adff3; } .button-5a0f34568a81d:after { background-color:#5adff3; } .button-5a0f34568a81d:hover { border-color: !important; color: #444444 !important; } .button-5a0f34568a81d:hover:after { background-color:; } .button-5a0f34568a81d:hover i { color: #444444; }
.button-5a0f34568a902 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568a902 { border-color: #b3e24e !important; color: #b3e24e; } .button-5a0f34568a902:after { background-color:#b3e24e; } .button-5a0f34568a902:hover { border-color: !important; color: #333333 !important; } .button-5a0f34568a902:hover:after { background-color:; } .button-5a0f34568a902:hover i { color: #333333; }
.button-5a0f34568a9e0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-5a0f34568a9e0 { border-color: #ff6b6b !important; color: #ff6b6b; } .button-5a0f34568a9e0:after { background-color:#ff6b6b; } .button-5a0f34568a9e0:hover { border-color: !important; color: #444444 !important; } .button-5a0f34568a9e0:hover:after { background-color:; } .button-5a0f34568a9e0:hover i { color: #444444; }
#mk-custom-box-5a0f34568a179 { 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-5a0f34568a179 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-5a0f345689bbb { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--5a0f345689bbb { background-position:left top; background-repeat:repeat; ; } .full-width-5a0f345689bbb .mk-fancy-title.pattern-style span, .full-width-5a0f345689bbb .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search