"Stylish button"
Bootstrap 3.3.0 Snippet by srrkit

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container"> <center> <h2>Download full source code</h2> </center> <section class="color-pattern-1"> <div> <button class="button button-1 button-1a">Button</button> <button class="button button-1 button-1b">Button</button> <button class="button button-1 button-1c">Button</button> </div> <div> <button class="button button-1 button-1d">Button</button> <button class="button button-1 button-1e">Button</button> <button class="button button-1 button-1f">Button</button> </div> </section> <section class="color-pattern-2"> <div> <button class="button button-2 button-2a">Button</button> <button class="button button-2 button-2b">Button</button> </div> <div> <button class="button button-2 button-2c">Button</button> <button class="button button-2 button-2d">Button</button> </div> <div> <button class="button button-2 button-2e">Button</button> <button class="button button-2 button-2f">Button</button> </div> <div> <button class="button button-2 button-2g">Button</button> <button class="button button-2 button-2h">Button</button> </div> <div> <button class="button button-2 button-2i">Yes</button> <button class="button button-2 button-2j">No</button> </div> </section> <section class="color-pattern-3"> <div> <button class="button button-3 button-3a icon-cart"><i class="fa fa-shopping-cart"></i> Add to cart</button> <button class="button button-3 button-3b icon-star-2"><i class="fa fa-star"></i> Bookmark</button> </div> <div> <button class="button button-3 button-3d icon-cog"><i class="fa fa-cog"></i>Settings</button> <button class="button button-3 button-3e icon-arrow-right"><i class="fa fa-arrow-right"></i>Send data</button> </div> <div> <button class="button button-3 button-3c icon-heart-2"><i class="fa fa-heart"></i>Favorite</button> </div> </section> <section class="color-pattern-4"> <div> <button class="button button-4 button-4a icon-arrow-right"><i class="fa fa-arrow-right"></i>Continue</button> <button class="button button-4 button-4b icon-arrow-left"><i class="fa fa-arrow-left"></i>Return</button> </div> <div> <button class="button button-4 button-4c icon-arrow-right"><i class="fa fa-arrow-right"></i>Continue</button> <button class="button button-4 button-4d icon-arrow-left"><i class="fa fa-arrow-left"></i>Return</button> </div> </section> <section class="color-pattern-5"> <div> <button class="button button-5 button-5a icon-cart"><i class="fa fa-shopping-cart"></i><span>Add to cart</span></button> <button class="button button-5 button-5a icon-remove"><i class="fa fa-trash"></i><span>Delete</span></button> <button class="button button-5 button-5a icon-cog"><i class="fa fa-cog"></i><span>Settings</span></button> </div> <div> <button class="button button-5 button-5b icon-cart"><i class="fa fa-shopping-cart"></i><span>Add to cart</span></button> <button class="button button-5 button-5b icon-remove"><i class="fa fa-trash"></i><span>Delete</span></button> <button class="button button-5 button-5b icon-cog"><i class="fa fa-cog"></i><span>Settings</span></button> </div> </section> </div> <!-- /container --> </body>
/* General Style */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0; height: 100%; } /* clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body { font-family: 'Roboto', Calibri, Arial, sans-serif; color: #89867e; background: #fff; } a { color: #888; text-decoration: none; } a:hover, a:active { color: #333; } /* Header Style */ .main, .container > header { margin: 0 auto; padding: 2em; } .container > header { text-align: center; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; opacity: 0.5; padding: 0 0 0.6em 0.1em; } .container { height: 100%; position: relative; } .container > section { margin: 0 auto; padding: 5em 0.5em; text-align: center; color: #fff; } .container > section div { position: relative; margin: 0; z-index: 1; } .container > section div.text { font-size: 1.4em; } .no-touch .note-touch { display: none; } .color-pattern-1 { background: #0e83cd; } .color-pattern-2 { background: #f06060; } .color-pattern-3 { background: #fcd04b; } .color-pattern-4 { background: #CC2E8C; } .color-pattern-5 { background: #0e83cd; } /* General button style (reset) */ .button { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .button:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } /* Button 1 */ .button-1 { border: 3px solid #fff; color: #fff; } /* Button 1a */ .button-1a:hover, .button-1a:active { color: #0e83cd; background: #fff; } /* Button 1b */ .button-1b:after { width: 100%; height: 0; top: 0; left: 0; background: #fff; } .button-1b:hover, .button-1b:active { color: #0e83cd; } .button-1b:hover:after, .button-1b:active:after { height: 100%; } /* Button 1c */ .button-1c:after { width: 0%; height: 100%; top: 0; left: 0; background: #fff; } .button-1c:hover, .button-1c:active { color: #0e83cd; } .button-1c:hover:after, .button-1c:active:after { width: 100%; } /* Button 1d */ .button-1d { overflow: hidden; } .button-1d: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%); } .button-1d:hover, .button-1d:active { color: #0e83cd; } .button-1d:hover:after { width: 104%; opacity: 1; } .button-1d:active:after { width: 101%; opacity: 1; } /* Button 1e */ .button-1e { overflow: hidden; } .button-1e: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); } .button-1e:hover, .button-1e:active { color: #0e83cd; } .button-1e:hover:after { height: 335%; opacity: 1; } .button-1e:active:after { height: 400%; opacity: 1; } /* Button 1f */ .button-1f { overflow: hidden; } .button-1f: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%); } .button-1f:hover, .button-1f:active { color: #0e83cd; } .button-1f:hover:after { height: 104%; opacity: 1; } .button-1f:active:after { height: 130%; opacity: 1; } /* Button 2 */ .button-2 { background: #cb4e4e; color: #fff; -webkit-box-shadow: 0 4px #ab3c3c; -moz-box-shadow: 0 4px #ab3c3c; box-shadow: 0 4px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none; } /* Button 2a */ .button-2a { border-radius: 0 0 5px 5px; } .button-2a:hover { box-shadow: 0 0 #ab3c3c; top: 2px; } .button-2a:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2b */ .button-2b { border-radius: 0 0 5px 5px; } .button-2b:hover { box-shadow: 0 6px #ab3c3c; top: -2px; } .button-2b:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2c */ .button-2c { border-radius: 5px; } .button-2c:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .button-2c:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2d */ .button-2d { border-radius: 5px; } .button-2d:hover { box-shadow: 0 6px #ab3c3c; top: -2px; } .button-2d:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2e */ .button-2e { border-radius: 5px; box-shadow: -4px 0 #ab3c3c; } .button-2e:hover { box-shadow: -4px 0 #ab3c3c; left: -2px; } .button-2e:active { box-shadow: 0 0 #ab3c3c; left: -6px; } /* Button 2f */ .button-2f { border-radius: 5px; box-shadow: 4px 0 #ab3c3c; } .button-2f:hover { box-shadow: 4px 0 #ab3c3c; left: 2px; } .button-2f:active { box-shadow: 0 0 #ab3c3c; left: 6px; } /* Button 2g */ .button-2g { border-radius: 40px; } .button-2g:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .button-2g:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2h */ .button-2h { border-radius: 20px; } .button-2h:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .button-2h:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2i */ .button-2i { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .button-2i:hover { box-shadow: 0 4px #ab3c3c; top: 2px; } .button-2i:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 2j */ .button-2j { border-radius: 50%; width: 90px; height: 90px; padding: 0; } .button-2j:hover { box-shadow: 0 6px #ab3c3c; top: -2px; } .button-2j:active { box-shadow: 0 0 #ab3c3c; top: 6px; } /* Button 3 */ .button-3 { background: #fcad26; color: #fff; } .button-3:hover { background: #f29e0d; } .button-3:active { background: #f58500; top: 2px; } .button-3>.fa { position: absolute; height: 100%; left: 0; top: 0; font-size: 140%; width: 60px; } .button-3>.fa:before { position: absolute; width: 25px; height: 25px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /* Button 3a */ .button-3a { padding: 25px 60px 25px 120px; } .button-3a>.fa { background: rgba(0, 0, 0, 0.05); } /* Button 3b */ .button-3b { padding: 25px 60px 25px 120px; border-radius: 10px; } .button-3b>.fa { border-right: 2px solid rgba(255, 255, 255, 0.75); } /* Button 3c */ .button-3c { padding: 80px 20px 20px 20px; border-radius: 10px; box-shadow: 0 3px #da9622; } .button-3c>.fa:before { position: static; } .button-3c:active { box-shadow: 0 3px #dc7801; } .button-3c>.fa { height: 60px; width: 100%; line-height: 60px; background: #fff; color: #f29e0d; border-radius: 10px 10px 0 0; } .button-3c:active:before { color: #f58500; } /* Button 3d */ .button-3d { padding: 25px 60px 25px 120px; border-radius: 10px; } .button-3d>.fa { background: #fff; color: #fcad26; z-index: 2; border-radius: 10px 0 0 10px; } .button-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); } .button-3d:active:before { color: #f58500; } .button-3d:active { top: 0; } .button-3d:active:after { left: 60px; } /* Button 3e */ .button-3e { padding: 25px 120px 25px 60px; overflow: hidden; } .button-3e>.fa { left: auto; right: 10px; z-index: 2; } .button-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); } .button-3e:hover:after { width: 35%; } /* Button 4 */ .button-4 { border-radius: 50px; border: 3px solid #fff; color: #fff; overflow: hidden; } .button-4:active { border-color: #902866; color: #902866; } .button-4:hover { background: #AB327A; } .button-4>.fa { 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; } .button-4:active>.fa { color: #902866; } /* Button 4a */ .button-4a>.fa { left: 130%; top: 0; } .button-4a:hover>.fa { left: 80%; } /* Button 4b */ .button-4b>.fa { left: -50%; top: 0; } .button-4b:hover>.fa { left: 10%; } /* Button 4c */ .button-4c>.fa { left: 70%; opacity: 0; top: 0; } .button-4c:hover>.fa { left: 80%; opacity: 1; } /* Button 4d */ .button-4d>.fa { left: 30%; opacity: 0; top: 0; } .button-4d:hover>.fa { left: 10%; opacity: 1; } /* Button 5 */ .button-5 { background: #165F8E; color: #fff; min-height: 70px; min-width: 260px; line-height: 24px; font-size: 16px; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .button-5:active { background: #1871A9; top: 2px; } .button-5 span { 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; } .button-5>.fa { position: absolute; height: 100%; width: 100%; line-height: 2.5; font-size: 180%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .button-5:active>.fa { color: #53AFE8; } /* Button 5a */ .button-5a:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .button-5a>.fa { left: 0; top: -100%; } .button-5a:hover>.fa { top: 0; } /* Button 5b */ .button-5b:hover span { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); } .button-5b>.fa { left: -100%; top: 0; } .button-5b:hover>.fa { left: 0; } /* 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); } @-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); } }

Related: See More


Questions / Comments:

hi how can I add just a heart icon like "button 3c" to my button?

YassirRabiea () - 7 years ago - Reply 0