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-59c58c9cc5b90 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc5b90 { background-color:#ff6b6b; } .button-59c58c9cc5b90:hover { background-color:#ed6464; } .button-59c58c9cc5b90.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc5b90.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-59c58c9cc5da7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc5da7 { background-color:#ff6b6b; } .button-59c58c9cc5da7:hover { background-color:#ed6464; } .button-59c58c9cc5da7.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc5da7.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-59c58c9cc5fc1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc5fc1 { background-color:#ff6b6b; } .button-59c58c9cc5fc1:hover { background-color:#ed6464; } .button-59c58c9cc5fc1.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc5fc1.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-59c58c9cc61ca { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc61ca { background-color:#ff6b6b; } .button-59c58c9cc61ca:hover { background-color:#ed6464; } .button-59c58c9cc61ca.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc61ca.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-59c58c9cc641a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc641a { background-color:#ff6b6b; } .button-59c58c9cc641a:hover { background-color:#ed6464; } .button-59c58c9cc641a.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc641a.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }
.button-59c58c9cc661c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc661c { background-color:#ff6b6b; } .button-59c58c9cc661c:hover { background-color:#ed6464; } .button-59c58c9cc661c.three-dimension { box-shadow: 0px 3px 0px 0px #cc5656; } .button-59c58c9cc661c.three-dimension:active { box-shadow: 0px 1px 0px 0px #cc5656; }

2D Buttons

.button-59c58c9cc7b81 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc7b81 { background-color:#978eb4; } .button-59c58c9cc7b81:hover { background-color:#8c84a7; } .button-59c58c9cc7b81.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc7b81.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-59c58c9cc7d78 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc7d78 { background-color:#978eb4; } .button-59c58c9cc7d78:hover { background-color:#8c84a7; } .button-59c58c9cc7d78.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc7d78.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-59c58c9cc7fa4 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc7fa4 { background-color:#978eb4; } .button-59c58c9cc7fa4:hover { background-color:#8c84a7; } .button-59c58c9cc7fa4.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc7fa4.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-59c58c9cc81a7 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc81a7 { background-color:#978eb4; } .button-59c58c9cc81a7:hover { background-color:#8c84a7; } .button-59c58c9cc81a7.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc81a7.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-59c58c9cc83b0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc83b0 { background-color:#978eb4; } .button-59c58c9cc83b0:hover { background-color:#8c84a7; } .button-59c58c9cc83b0.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc83b0.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }
.button-59c58c9cc85c8 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc85c8 { background-color:#978eb4; } .button-59c58c9cc85c8:hover { background-color:#8c84a7; } .button-59c58c9cc85c8.three-dimension { box-shadow: 0px 3px 0px 0px #797290; } .button-59c58c9cc85c8.three-dimension:active { box-shadow: 0px 1px 0px 0px #797290; }

Flat Buttons

.button-59c58c9cc9ba1 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc9ba1 { background-color:#57c8c3; } .mk-button.button-59c58c9cc9ba1.flat-dimension:hover { background-color:#252525 !important; }
.button-59c58c9cc9db3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc9db3 { background-color:#57c8c3; } .mk-button.button-59c58c9cc9db3.flat-dimension:hover { background-color:#252525 !important; }
.button-59c58c9cc9f93 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cc9f93 { background-color:#57c8c3; } .mk-button.button-59c58c9cc9f93.flat-dimension:hover { background-color:#252525 !important; }
.button-59c58c9cca1a6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cca1a6 { background-color:#57c8c3; } .mk-button.button-59c58c9cca1a6.flat-dimension:hover { background-color:#252525 !important; }
.button-59c58c9cca38a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cca38a { background-color:#57c8c3; } .mk-button.button-59c58c9cca38a.flat-dimension:hover { background-color:#252525 !important; }
.button-59c58c9cca59d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cca59d { background-color:#57c8c3; } .mk-button.button-59c58c9cca59d.flat-dimension:hover { background-color:#252525 !important; }

Outline buttons

.button-59c58c9ccbaef { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccbce6 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccbec3 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccc0b2 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccc28f { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccc474 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccda6c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccdc4b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9ccdc4b { border-color: #71d3cf !important; color: #71d3cf; } .button-59c58c9ccdc4b:hover { background-color:#71d3cf !important; color: #444444 !important; } .button-59c58c9ccdc4b:hover i { color: #444444; }
.button-59c58c9ccde1e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9ccde1e { border-color: #e6d459 !important; color: #e6d459; } .button-59c58c9ccde1e:hover { background-color:#e6d459 !important; color: #444444 !important; } .button-59c58c9ccde1e:hover i { color: #444444; }
.button-59c58c9cce00b { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cce00b { border-color: #5adff3 !important; color: #5adff3; } .button-59c58c9cce00b:hover { background-color:#5adff3 !important; color: #444444 !important; } .button-59c58c9cce00b:hover i { color: #444444; }
.button-59c58c9cce1e0 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cce1e0 { border-color: #b3e24e !important; color: #b3e24e; } .button-59c58c9cce1e0:hover { background-color:#b3e24e !important; color: #333333 !important; } .button-59c58c9cce1e0:hover i { color: #333333; }
.button-59c58c9cce388 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cce388 { border-color: #ff6b6b !important; color: #ff6b6b; } .button-59c58c9cce388:hover { background-color:#ff6b6b !important; color: #444444 !important; } .button-59c58c9cce388:hover i { color: #444444; }
#mk-custom-box-59c58c9ccd406 { 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-59c58c9ccd406 .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-59c58c9cccb69 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--59c58c9cccb69 { background-position:left top; background-repeat:repeat; ; } .full-width-59c58c9cccb69 .mk-fancy-title.pattern-style span, .full-width-59c58c9cccb69 .mk-blog-view-all { background-color: #555555 !important; }

Savvy buttons

.button-59c58c9ccf736 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccf965 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccfb58 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccfd61 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9ccff4a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9cd014e { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9cd164c { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; }
.button-59c58c9cd1846 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cd1846 { border-color: #71d3cf !important; color: #71d3cf; } .button-59c58c9cd1846:after { background-color:#71d3cf; } .button-59c58c9cd1846:hover { border-color: !important; color: #444444 !important; } .button-59c58c9cd1846:hover:after { background-color:; } .button-59c58c9cd1846:hover i { color: #444444; }
.button-59c58c9cd1a37 { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cd1a37 { border-color: #e6d459 !important; color: #e6d459; } .button-59c58c9cd1a37:after { background-color:#e6d459; } .button-59c58c9cd1a37:hover { border-color: !important; color: #444444 !important; } .button-59c58c9cd1a37:hover:after { background-color:; } .button-59c58c9cd1a37:hover i { color: #444444; }
.button-59c58c9cd1c3d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cd1c3d { border-color: #5adff3 !important; color: #5adff3; } .button-59c58c9cd1c3d:after { background-color:#5adff3; } .button-59c58c9cd1c3d:hover { border-color: !important; color: #444444 !important; } .button-59c58c9cd1c3d:hover:after { background-color:; } .button-59c58c9cd1c3d:hover i { color: #444444; }
.button-59c58c9cd1e7d { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cd1e7d { border-color: #b3e24e !important; color: #b3e24e; } .button-59c58c9cd1e7d:after { background-color:#b3e24e; } .button-59c58c9cd1e7d:hover { border-color: !important; color: #333333 !important; } .button-59c58c9cd1e7d:hover:after { background-color:; } .button-59c58c9cd1e7d:hover i { color: #333333; }
.button-59c58c9cd206a { margin-bottom: 15px; margin-top: 0px; min-width: 0px !important; } .button-59c58c9cd206a { border-color: #ff6b6b !important; color: #ff6b6b; } .button-59c58c9cd206a:after { background-color:#ff6b6b; } .button-59c58c9cd206a:hover { border-color: !important; color: #444444 !important; } .button-59c58c9cd206a:hover:after { background-color:; } .button-59c58c9cd206a:hover i { color: #444444; }
#mk-custom-box-59c58c9cd0ffd { 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-59c58c9cd0ffd .mk-fancy-title.pattern-style span{ background-color: #555555 !important; }
.full-width-59c58c9cd0787 { min-height:100px; padding:50px 0 40px; margin-bottom:0px; background-color:#555555; } #background-layer--59c58c9cd0787 { background-position:left top; background-repeat:repeat; ; } .full-width-59c58c9cd0787 .mk-fancy-title.pattern-style span, .full-width-59c58c9cd0787 .mk-blog-view-all { background-color: #555555 !important; }

Full width Buttons

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

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

Not readable? Change text. captcha txt

Start typing and press Enter to search