"Creative Button Styles (Codrops)"
Bootstrap 3.0.3 Snippet by xewl

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <div class="container"> <div class="row"> <div class="page-header"> <h1 class="page-title">Creative Button Styles</h1> <h2 class="page-subtitle">Modern and subtle styles & effects for buttons (hover and click) <span class="for-bs">for Bootstrap</span></h2> <p>The purpose of this snippet is being able to use the styling from <a href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/" target="_blank">this CoDrops article</a> as an extension to Bootstrap.</p> <p>I take no credit for the original work! · I'm happy with a tweet/share though!'</p> </div> </div> </div> </header> <div class="box"> <div class="container"> <div class="row button-showcase"> <div class="col-md-4 col-md-offset-4"> <button class="btn btn-lg btn-block btn-default">Default Button</button> </div> </div> </div> </div> <div class="box color-1"> <div class="container"> <h3>Effect 1 · Background Color Animation</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-lg btn-default btn-effect btn-effect1 btn-effect1a"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1a</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-primary btn-effect btn-effect1 btn-effect1b"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1b</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-success btn-effect btn-effect1 btn-effect1c"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1c</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-info btn-effect btn-effect1 btn-effect1d"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1d</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-warning btn-effect btn-effect1 btn-effect1e"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1e</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-danger btn-effect btn-effect1 btn-effect1f"><span class="icon glyphicon glyphicon-home"></span>Home</button> <code>btn-effect btn-effect1 btn-effect1f</code> </div> </div> </div> </div> <div class="box color-2"> <div class="container"> <h3>Effect 2 · Depth Animation "Push/Pull"</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <div class="box color-3"> <div class="container"> <h3>Effect 3 · Fade In</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <div class="box color-4"> <div class="container"> <h3>Effect 4 · Icon Fade & Slide Animation</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <div class="box color-5"> <div class="container"> <h3>Effect 5 · Icon Slide Animation</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-sm btn-default btn-effect btn-effect5 btn-effect5a"><span class="icon glyphicon glyphicon-shopping-cart"></span><span class="text">Add to cart</span></button> <code>btn-effect btn-effect5 btn-effect5a</code> </div> <div class="col-md-4"> <div class="btn-group"> <button class="btn btn-success btn-effect btn-effect5 btn-effect5a"><span class="icon glyphicon glyphicon-floppy-disk"></span><span class="text">Save</span></button> <button class="btn btn-warning btn-effect btn-effect5 btn-effect5a"><span class="icon glyphicon glyphicon-trash"></span><span class="text">Delete</span></button> <button class="btn btn-danger btn-effect btn-effect5 btn-effect5a"><span class="icon glyphicon glyphicon-share-alt"></span><span class="text">Share</span></button> </div> <code>btn-effect btn-effect5 btn-effect5a</code> </div> <div class="col-md-4"> <button class="btn btn-lg btn-success btn-effect btn-effect5 btn-effect5a"><span class="icon glyphicon glyphicon-cog"></span><span class="text">Settings</span></button> <code>btn-effect btn-effect5 btn-effect5a</code> </div> </div> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-lg btn-success btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-cog"></span><span class="text">Settings</span></button> <code>btn-effect btn-effect5 btn-effect5b</code> </div> <div class="col-md-4"> <div class="btn-group"> <button class="btn btn-sm btn-success btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-floppy-disk"></span><span class="text">Save</span></button> <button class="btn btn-sm btn-warning btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-trash"></span><span class="text">Delete</span></button> <button class="btn btn-sm btn-danger btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-share-alt"></span><span class="text">Share</span></button> </div> <code>btn-effect btn-effect5 btn-effect5b</code> </div> <div class="col-md-4"> <button class="btn btn-xs btn-success btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-floppy-disk"></span><span class="text">Save</span></button> <button class="btn btn-xs btn-warning btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-trash"></span><span class="text">Delete</span></button> <button class="btn btn-xs btn-danger btn-effect btn-effect5 btn-effect5b"><span class="icon glyphicon glyphicon-share-alt"></span><span class="text">Share</span></button> <code>btn-effect btn-effect5 btn-effect5b</code> </div> </div> </div> </div> <div class="box color-6"> <div class="container"> <h3>Effect 6 · Border Animation</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <div class="box color-7"> <div class="container"> <h3>Effect 7 · OnClick Animation</h3> <p>Click on the buttons to see the effect</p> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <div class="box color-8"> <div class="container"> <h3>Effect 8 · 3D Animation</h3> <div class="row button-showcase"> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> <div class="col-md-4"> <button class="btn btn-default"><span class="icon glyphicon glyphicon-home"></span>Home</button> </div> </div> </div> </div> <footer> <div class="container"> <div class="row"> <span class="copy">Based on: <a href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/" target="_blank">Codrops "CREATIVE BUTTON STYLES"</a></span> <span class="copy">Reformed by: <a href="https://kenne.be/" target="_blank">Ken Verhaegen</a> · <a href="https://twitter.com/Xewl" target="_blank">@Xewl</a></span> </div> </div> </footer>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); /* * General Styling */ html { overflow-x: hidden; } body { background-color: #eee; margin: 0 auto; padding: 0; width: 100%; box-sizing: box-width; } .icon { margin-right: .3em; -webkit-font-smoothing: antialiased; } .copy { display: block; margin: 20px auto; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); font-size: 90%; } .copy a { color: #fff; } .button-showcase { margin: 20px auto; } .button-showcase div { padding: 20px 0; text-align: center; } .page-header { text-align: center; } .page-header .page-title, .page-header .page-subtitle { color: #aaa; text-shadow: 0 0 2px #fff; font-family: 'Lato', Calibri, Arial, sans-serif; color: #89867e; } .page-header .page-title { font-weight: 400; } .page-header .page-subtitle { font-weight: 300; } .for-bs { font-weight: bold; color: #111; display: block; } header, footer { display: block; width: 100%; overflow: auto; } footer { background: #0e83cd; } .color-1 { background: #0e83cd; } .color-2 { background: #f06060; } .color-3 { background: #fcd04b; } .color-4 { background: #2ecc71; } .color-5 { background: #9e54bd; } .color-6 { background: #4593e3; } .color-7 { background: #2ac56c; } .color-8 { background: #ecf0f1; } .color-8 { color: #aaa; font-weight: bold; } .color-8 .btn { color: #aaa; } code { position: relative; width: 90%; clear: both; display: block; top: 15px; margin: 0 auto; } code:after { content: " "; position: absolute; display: block; bottom: 100%; left: 50%; height: 0; width: 0; pointer-events: none; border: solid transparent; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 5px; margin-left: -5px; } /* * Creative Button Styles * --- * These buttons are converted styles from the following Codrops article: * http://tympanus.net/codrops/2013/06/13/creative-button-styles/ * Demo: http://tympanus.net/Development/CreativeButtons/ * * This conversion was a plan to add some of this cool stuff onto the Bootstrap package. * * Have fun. */ .box .container { background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* W3C */ } .btn-default .icon, .btn-default .glyphicon { color: #111; } /* * Button Styles * --- * Original file: http://tympanus.net/Development/CreativeButtons/css/component.css * --- * This file has been edited so it won't interfere with Bootstrap's styling. * Buttons may look different. And may even behave a little bit different. * I tried my best to copy over the syles. * --- * WORK IN PROGRESS (21st of Jan, 2014 - 9 PM GMT) * 1: Background hover effects (50%) * 2: Shadow 3D effects (0%) * 3: Icon Highlight effects (0%) * 4: Icon Fade/Move effects (0%) * 5: Overlay effects (90%) * 6: Inline border styles (0%) * 7: onClick effects - requires javascript (0%) * 8: 3D Button effetcs (0%) * --- * Bugs noted: * 8: .btn-group-Justified seems to keep its buttons inline, and not justified. (21 jan 2014) * --- * Last update 21st of Jan, 2014 - 11 PM GMT */ /* General button effect style (reset) */ .btn-effect { outline: none; position: relative; } /* General button effect Icon behavior/style */ .btn-effect.btn-xs .icon { line-height: 2em; font-size: 90%; } .btn-effect.btn-sm .icon { line-height: 2em; font-size: 100%; } .btn-effect .icon { line-height: 2.5em; font-size: 100%; } .btn-effect.btn-lg .icon { font-size: 100%; } .btn-effect.btn-lg .icon { line-height: 2.5; font-size: 100%; } /* Button Effect 1 */ .btn-effect1 { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-effect1:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Button 1a */ .btn-effect1a:hover, .btn-effect1a:active { color: #0e83cd; background: #fff; } /* Button 1b */ .btn-effect1b:after { width: 100%; height: 0; top: 0; left: 0; background: #fff; } .btn-effect1b:hover, .btn-effect1b:active { color: #0e83cd; } .btn-effect1b:hover:after, .btn-effect1b:active:after { height: 100%; } /* Button 1c */ .btn-effect1c:after { width: 0%; height: 100%; top: 0; left: 0; background: #fff; } .btn-effect1c:hover, .btn-effect1c:active { color: #0e83cd; } .btn-effect1c:hover:after, .btn-effect1c:active:after { width: 100%; } /* Button 1d */ .btn-effect1d { overflow: hidden; } .btn-effect1d:after { width: 0; height: 103%; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-effect1d:hover, .btn-effect1d:active { color: #0e83cd; } .btn-effect1d:hover:after { width: 90%; opacity: 1; } .btn-effect1d:active:after { width: 101%; opacity: 1; } /* Button 1e */ .btn-effect1e { overflow: hidden; } .btn-effect1e:after { width: 100%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } .btn-effect1e:hover, .btn-effect1e:active { color: #0e83cd; } .btn-effect1e:hover:after { height: 260%; opacity: 1; } .btn-effect1e:active:after { height: 400%; opacity: 1; } /* Button 1f */ .btn-effect1f { overflow: hidden; } .btn-effect1f:after { width: 101%; height: 0; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .btn-effect1f:hover, .btn-effect1f:active { color: #0e83cd; } .btn-effect1f:hover:after { height: 73%; opacity: 1; } .btn-effect1f:active:after { height: 130%; opacity: 1; } /* Button 2 */ .btn-effect2 { background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none; } /* Button 2a */ .btn-2a { border-radius: 0 0 5px 5px; } .btn-2a:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2a:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2b */ .btn-2b { border-radius: 0 0 5px 5px; } .btn-2b:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2b:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2c */ .btn-2c { border-radius: 5px; } .btn-2c:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2c:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2d */ .btn-2d { border-radius: 5px; } .btn-2d:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2d:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2e */ .btn-2e { border-radius: 5px; box-shadow: -6px 0 #ab3c3c; } .btn-2e:hover { box-shadow: -4px 0 #ab3c3c; left: -2px; } .btn-2e:active { box-shadow: 0 0 #ab3c3c; left: -6px; } /* Button 2f */ .btn-2f { border-radius: 5px; box-shadow: 6px 0 #ab3c3c; } .btn-2f:hover { box-shadow: 4px 0 #ab3c3c; left: 2px; } .btn-2f:active { box-shadow: 0 0 #ab3c3c; left: 6px; } /* Button 2g */ .btn-2g { border-radius: 40px; } .btn-2g:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2g:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2h */ .btn-2h { border-radius: 20px; } .btn-2h:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2h:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2i */ .btn-2i { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .btn-2i:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .btn-2i:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2j */ .btn-2j { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .btn-2j:hover { box-shadow: 0 8px #ab3c3c; top: -2px; } .btn-2j:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 3 */ .btn-3 { background: #fcad26; color: #fff; } .btn-3:hover { background: #f29e0d; } .btn-3:active { background: #f58500; top: 2px; } .btn-3:before { position: absolute; height: 100%; left: 0; top: 0; line-height: 3; font-size: 140%; width: 60px; } /* Button 3a */ .btn-3a { padding: 25px 60px 25px 120px; } .btn-3a:before { background: rgba(0,0,0,0.05); } /* Button 3b */ .btn-3b { padding: 25px 60px 25px 120px; border-radius: 10px; } .btn-3b:before { border-right: 2px solid rgba(255,255,255,0.5); } /* Button 3c */ .btn-3c { padding: 80px 20px 20px 20px; border-radius: 10px; box-shadow: 0 3px #da9622; } .btn-3c:active { box-shadow: 0 3px #dc7801; } .btn-3c:before { height: 60px; width: 100%; line-height: 60px; background: #fff; color: #f29e0d; border-radius: 10px 10px 0 0; } .btn-3c:active:before { color: #f58500; } /* Button 3d */ .btn-3d { padding: 25px 60px 25px 120px; border-radius: 10px; } .btn-3d:before { background: #fff; color: #fcad26; z-index: 2; border-radius: 10px 0 0 10px; } .btn-3d:after { width: 20px; height: 20px; background: #fff; z-index: 1; left: 55px; top: 50%; margin: -10px 0 0 -10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .btn-3d:active:before { color: #f58500; } .btn-3d:active { top: 0; } .btn-3d:active:after { left: 60px; } /* Button 3e */ .btn-3e { padding: 25px 120px 25px 60px; overflow: hidden; } .btn-3e:before { left: auto; right: 10px; z-index: 2; } .btn-3e:after { width: 30%; height: 200%; background: rgba(255,255,255,0.1); z-index: 1; right: 0; top: 0; margin: -5px 0 0 -5px; -webkit-transform-origin: 0 0; -webkit-transform: rotate(-20deg); -moz-transform-origin: 0 0; -moz-transform: rotate(-20deg); -ms-transform-origin: 0 0; -ms-transform: rotate(-20deg); transform-origin: 0 0; transform: rotate(-20deg); } .btn-3e:hover:after { width: 40%; } /* Button 4 */ .btn-4 { border-radius: 50px; border: 3px solid #fff; color: #fff; overflow: hidden; } .btn-4:active { border-color: #17954c; color: #17954c; } .btn-4:hover { background: #24b662; } .btn-4:before { position: absolute; height: 100%; font-size: 125%; line-height: 3.5; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .btn-4:active:before { color: #17954c; } /* Button 4a */ .btn-4a:before { left: 130%; top: 0; } .btn-4a:hover:before { left: 80%; } /* Button 4b */ .btn-4b:before { left: -50%; top: 0; } .btn-4b:hover:before { left: 10%; } /* Button 4c */ .btn-4c:before { left: 70%; opacity: 0; top: 0; } .btn-4c:hover:before { left: 80%; opacity: 1; } /* Button 4d */ .btn-4d:before { left: 30%; opacity: 0; top: 0; } .btn-4d:hover:before { left: 10%; opacity: 1; } /* Button 5 */ .btn-effect5 { overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: relative; } .btn-effect5:active { background: #9053a9; top: 2px; } .btn-effect5:active .icon { color: #703b87; } .btn-effect5:hover span.text { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .btn-effect5 span.text { display: inline-block; width: 100%; height: 100%; -webkit-transition: all 0.3s; -webkit-backface-visibility: hidden; -moz-transition: all 0.3s; -moz-backface-visibility: hidden; transition: all 0.3s; backface-visibility: hidden; } .btn-effect5 .icon { position: absolute; height: 100%; width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Button 5a */ .btn-effect5a .icon { left: 0; top: -100%; } .btn-effect5a:hover .icon { top: 0; } .btn-effect5b .icon { left: -100%; top: 0; } .btn-effect5b:hover .icon { left: 0; } /* Button 6 */ .btn-6 { color: #fff; background: #226fbe; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-6:active { top: 2px; } /* Button 6a */ .btn-6a { border: 4px solid #226fbe; } .btn-6a:hover { background: transparent; color: #226fbe; } /* Button 6b */ .btn-6b { border: 4px solid #226fbe; border-radius: 15px; } .btn-6b:hover { background: transparent; color: #226fbe; } /* Button 6c */ .btn-6c { border: 4px solid #226fbe; border-radius: 60px; } .btn-6c:hover { background: transparent; color: #226fbe; } /* Button 6d */ .btn-6d { border: 2px dashed #226fbe; } .btn-6d:hover { background: transparent; color: #226fbe; } /* Button 6e */ .btn-6e { border: 2px dashed #226fbe; border-radius: 15px; } .btn-6e:hover { background: transparent; color: #226fbe; } /* Button 6f */ .btn-6f { border: 2px dashed #226fbe; border-radius: 60px; } .btn-6f:hover { background: transparent; color: #226fbe; } /* Button 6g */ .btn-6g { border: 2px dotted #226fbe; } .btn-6g:hover { background: transparent; color: #226fbe; } /* Button 6h */ .btn-6h { border: 2px dotted #226fbe; border-radius: 15px; } .btn-6h:hover { background: transparent; color: #226fbe; } /* Button 6i */ .btn-6i { border: 2px dotted #226fbe; border-radius: 60px; } .btn-6i:hover { background: transparent; color: #226fbe; } /* Button 6j */ .btn-6j { border: 4px double #226fbe; } .btn-6j:hover { background: transparent; color: #226fbe; } /* Button 6k */ .btn-6k { border: 4px double #226fbe; border-radius: 15px; } .btn-6k:hover { background: transparent; color: #226fbe; } /* Button 6l */ .btn-6l { border: 4px double #226fbe; border-radius: 60px; } .btn-6l:hover { background: transparent; color: #226fbe; } /* Button 7 */ .btn-7 { background: #17aa56; color: #fff; border-radius: 7px; box-shadow: 0 5px #119e4d; padding: 25px 60px 25px 90px; } /* Button 7a */ .btn-7a { overflow: hidden; } .btn-7a:before { position: absolute; left: 0; width: 40%; font-size: 160%; line-height: 0.8; color: #0a833d; } .btn-7a.btn-activated { -webkit-animation: fadeOutText 0.5s; -moz-animation: fadeOutText 0.5s; animation: fadeOutText 0.5s; } .btn-7a.btn-activated:before { -webkit-animation: moveToRight 0.5s; -moz-animation: moveToRight 0.5s; animation: moveToRight 0.5s; } @-webkit-keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #fff; } } @-moz-keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #fff; } } @keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #fff; } } @-webkit-keyframes moveToRight { 80% { -webkit-transform: translateX(250%); } 81% { opacity: 1; -webkit-transform: translateX(250%); } 82% { opacity: 0; -webkit-transform: translateX(250%); } 83% { opacity: 0; -webkit-transform: translateX(-50%); } 84% { opacity: 1; -webkit-transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes moveToRight { 80% { -moz-transform: translateX(250%); } 81% { opacity: 1; -moz-transform: translateX(250%); } 82% { opacity: 0; -moz-transform: translateX(250%); } 83% { opacity: 0; -moz-transform: translateX(-50%); } 84% { opacity: 1; -moz-transform: translateX(-50%); } 100% { -moz-transform: translateX(0%); } } @keyframes moveToRight { 80% { transform: translateX(250%); } 81% { opacity: 1; transform: translateX(250%); } 82% { opacity: 0; transform: translateX(250%); } 83% { opacity: 0; transform: translateX(-50%); } 84% { opacity: 1; transform: translateX(-50%); } 100% { transform: translateX(0%); } } /* Button 7b */ .btn-7b { overflow: hidden; } .btn-7b:before { position: absolute; left: 0; width: 40%; font-size: 160%; line-height: 0.8; color: #0a833d; } .btn-7b.btn-activated:before { -webkit-animation: scaleUp 0.5s; -moz-animation: scaleUp 0.5s; animation: scaleUp 0.5s; } @-webkit-keyframes scaleUp { 80% { opacity: 0; -webkit-transform: scale(2); } 100% { opacity: 0; -webkit-transform: scale(2); } } @-moz-keyframes scaleUp { 80% { opacity: 0; -moz-transform: scale(2); } 100% { opacity: 0; -moz-transform: scale(2); } } @keyframes scaleUp { 80% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(2); } } /* Icon only style */ .btn-icon-only { font-size: 0; padding: 25px 30px; } .btn-icon-only:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 26px; line-height: 54px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } /* Button 7c */ .btn-7c { overflow: hidden; } .btn-7c:before { color: #fff; z-index: 1; } .btn-7c:after { position: absolute; top: 0; left: 0; height: 100%; z-index: 0; width: 0; background: #0a833d; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7c.btn-activated:after { -webkit-animation: fillToRight 0.7s forwards; -moz-animation: fillToRight 0.7s forwards; animation: fillToRight 0.7s forwards; } @-webkit-keyframes fillToRight { to { width: 100%; } } @-moz-keyframes fillToRight { to { width: 100%; } } @keyframes fillToRight { to { width: 100%; } } /* Button 7d */ .btn-7d { overflow: hidden; } .btn-7d:before { color: #fff; z-index: 1; } .btn-7d:after { position: absolute; top: 0; left: 0; height: 0; width: 100%; z-index: 0; background: #21bb63; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7d.btn-activated:after { -webkit-animation: emptyBottom 0.7s forwards; -moz-animation: emptyBottom 0.7s forwards; animation: emptyBottom 0.7s forwards; } @-webkit-keyframes emptyBottom { to { height: 100%; } } @-moz-keyframes emptyBottom { to { height: 100%; } } @keyframes emptyBottom { to { height: 100%; } } /* Button 7e */ .btn-7e:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #ea515e; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7e.btn-activated:after { -webkit-animation: scaleFade 0.5s forwards; -moz-animation: scaleFade 0.5s forwards; animation: scaleFade 0.5s forwards; } @-webkit-keyframes scaleFade { 50% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(2.5); } } @-moz-keyframes scaleFade { 50% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); } } @keyframes scaleFade { 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } } /* Button 7f */ .btn-7f:before { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; } .btn-7f:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #ffe44d; visibility: hidden; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffe44d; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); transform: scale(4); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7f.btn-activated:after { visibility: visible; -webkit-animation: dropDown 0.3s forwards; -moz-animation: dropDown 0.3s forwards; animation: dropDown 0.3s forwards; } @-webkit-keyframes dropDown { to { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes dropDown { to { opacity: 1; -moz-transform: scale(1); } } @keyframes dropDown { to { opacity: 1; transform: scale(1); } } /* Button 7g */ .btn-7g:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #0a833d; visibility: hidden; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7g.btn-activated:after { visibility: visible; -webkit-animation: dropDownFade 0.5s forwards; -moz-animation: dropDownFade 0.5s forwards; animation: dropDownFade 0.5s forwards; } @-webkit-keyframes dropDownFade { 50% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes dropDownFade { 50% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(1.5); } } @keyframes dropDownFade { 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* Button 7h */ .btn-7h { overflow: hidden; } .btn-7h span { display: inline-block; width: 100%; } .btn-7h:before { position: absolute; left: 0; width: 40%; font-size: 160%; line-height: 0.8; color: #0a833d; } /* Success and error */ .btn-effect-success, .btn-effect-error { color: transparent; } .btn-effect-success:after, .btn-effect-error:after { z-index: 1; color: #fff; left: 40%; } .btn-effect-success:before { content: "\e001"; } .btn-effect-success:after { content: "Success!"; -webkit-animation: moveUp 0.5s; -moz-animation: moveUp 0.5s; animation: moveUp 0.5s; } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes moveUp { 0% { -moz-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes moveUp { 0% { transform: translateY(50%); opacity: 0; } 100% { opacity: 1; transform: translateY(0); } } .btn-error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s; } /* From Dan Eden's animate.css: http://daneden.me/animate/ */ @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .btn-error:before { content: "\e002"; } .btn-error:after { content: "Error!"; -webkit-animation: scaleFromUp 0.5s; -moz-animation: scaleFromUp 0.5s; animation: scaleFromUp 0.5s; } @-webkit-keyframes scaleFromUp { 0% { -webkit-transform: scale(0); opacity: 0; } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes scaleFromUp { 0% { -moz-transform: scale(0); opacity: 0; } 100% { opacity: 1; -moz-transform: scale(1); } } @keyframes scaleFromUp { 0% { transform: scale(0); opacity: 0; } 100% { opacity: 1; transform: scale(1); } } /* Special trash effect */ .trash-effect { position: relative; max-width: 320px; margin: 60px auto 0; } .trash-effect .icon-file { font-size: 30px; position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin: -45px 0 0 -25px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateX(90px) translateY(20px) scale(1); -moz-transform: translateX(90px) translateY(20px) scale(1); -ms-transform: translateX(90px) translateY(20px) scale(1); transform: translateX(90px) translateY(20px) scale(1); } .trash-effect .icon-file:nth-child(2) { -webkit-transform: translateX(140px) translateY(-10px) scale(1); -moz-transform: translateX(140px) translateY(-10px) scale(1); -ms-transform: translateX(140px) translateY(-10px) scale(1); transform: translateX(140px) translateY(-10px) scale(1); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .trash-effect .icon-file:nth-child(3) { -webkit-transform: translateX(140px) translateY(50px) scale(1); -moz-transform: translateX(140px) translateY(50px) scale(1); -ms-transform: translateX(140px) translateY(50px) scale(1); transform: translateX(140px) translateY(50px) scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .trash-effect.trash-effect-active .icon-file { -webkit-transform: translateX(-100px) translateY(-10px) scale(0); -moz-transform: translateX(-100px) translateY(-10px) scale(0); -ms-transform: translateX(-100px) translateY(-10px) scale(0); transform: translateX(-100px) translateY(-10px) scale(0); } /* Button 7i */ .btn-7i { box-shadow: none; border-radius: 0 0 7px 7px; padding: 27px 33px; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .btn-7i:before { line-height: 45px; } .btn-7i:after { height: 10px; width: 100%; background: #17aa56; border-radius: 7px 7px 0 0; left: 0; top: -10px; z-index: 1; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .trash-effect-active .btn-7i:after { -webkit-animation: openTrash 0.5s; -moz-animation: openTrash 0.5s; animation: openTrash 0.5s; } @-webkit-keyframes openTrash { 50% { -webkit-transform: rotate(-35deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes openTrash { 50% { -moz-transform: rotate(-35deg); } 100% { -moz-transform: rotate(0deg); } } @keyframes openTrash { 50% { transform: rotate(-35deg); } 100% { transform: rotate(0deg); } } /* Button 8 */ .perspective { -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; display: inline-block; } .btn-8 { display: block; background: #5cbcf6; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .btn-8:active { background: #55b7f3; } /* Button 8a */ .btn-8a:after { width: 100%; height: 40%; left: 0; top: -40%; background: #49a7df; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8a:hover { -webkit-transform: rotateX(-15deg); -moz-transform: rotateX(-15deg); -ms-transform: rotateX(-15deg); transform: rotateX(-15deg); } /* Button 8b */ .btn-8b:after { width: 100%; height: 40%; left: 0; top: 100%; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8b:hover { -webkit-transform: rotateX(15deg); -moz-transform: rotateX(15deg); -ms-transform: rotateX(15deg); transform: rotateX(15deg); } /* Button 8c */ .btn-8c:after { width: 20%; height: 100%; left: -20%; top: 0; background: #49a7df; -webkit-transform-origin: 100% 0%; -webkit-transform: rotateY(-90deg); -moz-transform-origin: 100% 0%; -moz-transform: rotateY(-90deg); -ms-transform-origin: 100% 0%; -ms-transform: rotateY(-90deg); transform-origin: 100% 0%; transform: rotateY(-90deg); } .btn-8c:hover { -webkit-transform: rotateY(15deg); -moz-transform: rotateY(15deg); -ms-transform: rotateY(15deg); transform: rotateY(15deg); } /* Button 8d */ .btn-8d:after { width: 20%; height: 100%; left: 100%; top: 0; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateY(90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateY(90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateY(90deg); transform-origin: 0% 0%; transform: rotateY(90deg); } .btn-8d:hover { -webkit-transform: rotateY(-15deg); -moz-transform: rotateY(-15deg); -ms-transform: rotateY(-15deg); transform: rotateY(-15deg); } /* Button 8e */ .btn-8e { -webkit-transform: rotateX(-15deg); -moz-transform: rotateX(-15deg); -ms-transform: rotateX(-15deg); transform: rotateX(-15deg); } .btn-8e:after { width: 100%; height: 40%; left: 0; top: -40%; background: #49a7df; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); -ms-transform-origin: 0% 100%; -ms-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8e:active { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } /* Button 8f */ .btn-8f { -webkit-transform: rotateX(15deg); -moz-transform: rotateX(15deg); -ms-transform: rotateX(15deg); transform: rotateX(15deg); } .btn-8f:after { width: 100%; height: 40%; left: 0; top: 100%; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8f:active { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } /* Button 8g */ .btn-8g { background: #fff; color: #999; } .btn-8g:active { background: #fff; } .btn-8g:after, .btn-8g:before { text-transform: uppercase; width: 100%; height: 100%; position: absolute; left: 0; line-height: 70px; } .btn-8g:after { top: -100%; background: #7aca7c; color: #358337; content: 'It worked!'; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); -ms-transform-origin: 0% 100%; -ms-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8g:before { top: 100%; background: #e96a6a; color: #a33a3a; content: 'Error!'; font-weight: 700; font-family: 'Lato', Calibri, Arial, sans-serif; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8g.btn-success3d { background: #aaa; -webkit-transform-origin: 50% 100%; -webkit-transform: rotateX(-90deg) translateY(100%); -moz-transform-origin: 50% 100%; -moz-transform: rotateX(-90deg) translateY(100%); -ms-transform-origin: 50% 100%; -ms-transform: rotateX(-90deg) translateY(100%); transform-origin: 50% 100%; transform: rotateX(-90deg) translateY(100%); } .btn-8g.btn-error3d { background: #aaa; -webkit-transform-origin: 50% 0%; -webkit-transform: rotateX(90deg) translateY(-100%); -moz-transform-origin: 50% 0%; -moz-transform: rotateX(90deg) translateY(-100%); -ms-transform-origin: 50% 0%; -ms-transform: rotateX(90deg) translateY(-100%); transform-origin: 50% 0%; transform: rotateX(90deg) translateY(-100%); }

Related: See More


Questions / Comments: