<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="header"> <h1>Gradient Buttons</h1> </div> <div class="content"> <h2>Colors</h2> <ul class="color"> <li class="green"></li> <li class="blue"></li> <li class="red"></li> <li class="purple"></li> <li class="cyan"></li> <li class="yellow"></li> </ul> <div class="container"> <h2>mini</h2> <a href="#" class="btn-gradient cyan mini">Button</a> <a href="#" class="btn-gradient orange mini">Button</a> <a href="#" class="btn-gradient blue mini">Button</a> <a href="#" class="btn-gradient purple mini">Button</a> <a href="#" class="btn-gradient green mini">Button</a> <a href="#" class="btn-gradient yellow mini">Button</a> <a href="#" class="btn-gradient red mini">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red mini"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>small</h2> <a href="#" class="btn-gradient cyan small">Button</a> <a href="#" class="btn-gradient orange small">Button</a> <a href="#" class="btn-gradient blue small">Button</a> <a href="#" class="btn-gradient purple small">Button</a> <a href="#" class="btn-gradient green small">Button</a> <a href="#" class="btn-gradient yellow small">Button</a> <a href="#" class="btn-gradient red small">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red small"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>normal</h2> <a href="#" class="btn-gradient cyan">Button</a> <a href="#" class="btn-gradient orange">Button</a> <a href="#" class="btn-gradient blue">Button</a> <a href="#" class="btn-gradient purple">Button</a> <a href="#" class="btn-gradient green">Button</a> <a href="#" class="btn-gradient yellow">Button</a> <a href="#" class="btn-gradient red">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>large</h2> <a href="#" class="btn-gradient cyan large">Button</a> <a href="#" class="btn-gradient orange large">Button</a> <a href="#" class="btn-gradient blue large">Button</a> <a href="#" class="btn-gradient purple large">Button</a> <a href="#" class="btn-gradient green large">Button</a> <a href="#" class="btn-gradient yellow large">Button</a> <a href="#" class="btn-gradient red large">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red large"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>block</h2> <a href="#" class="btn-gradient cyan block">Block Button</a> <a href="#" class="btn-gradient orange block">Block Button</a> <a href="#" class="btn-gradient blue block">Block Button</a> <a href="#" class="btn-gradient purple block">Block Button</a> <a href="#" class="btn-gradient green block">Block Button</a> <a href="#" class="btn-gradient yellow block">Block Button</a> <a href="#" class="btn-gradient red block">Block Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red block"</span>>Button</<span class="anc">a</span>></pre> </div> </div> <div class="header"> <h1>.btn-two</h1> </div> <div class="content"> <section> <div class="container"> <h2>mini</h2> <a href="#" class="btn-two green mini">Button</a> <a href="#" class="btn-two blue mini">Button</a> <a href="#" class="btn-two red mini">Button</a> <a href="#" class="btn-two purple mini">Button</a> <a href="#" class="btn-two cyan mini">Button</a> <a href="#" class="btn-two yellow mini">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green mini"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>small</h2> <a href="#" class="btn-two green small">Button</a> <a href="#" class="btn-two blue small">Button</a> <a href="#" class="btn-two red small">Button</a> <a href="#" class="btn-two purple small">Button</a> <a href="#" class="btn-two cyan small">Button</a> <a href="#" class="btn-two yellow small">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green small"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>normal</h2> <a href="#" class="btn-two green">Button</a> <a href="#" class="btn-two blue">Button</a> <a href="#" class="btn-two red">Button</a> <a href="#" class="btn-two purple">Button</a> <a href="#" class="btn-two cyan">Button</a> <a href="#" class="btn-two yellow">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>large</h2> <a href="#" class="btn-two green large">Button</a> <a href="#" class="btn-two blue large">Button</a> <a href="#" class="btn-two red large">Button</a> <a href="#" class="btn-two purple large">Button</a> <a href="#" class="btn-two cyan large">Button</a> <a href="#" class="btn-two yellow large">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green large"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>rounded</h2> <a href="#" class="btn-two green rounded">Button</a> <a href="#" class="btn-two blue rounded">Button</a> <a href="#" class="btn-two red rounded">Button</a> <a href="#" class="btn-two purple rounded">Button</a> <a href="#" class="btn-two cyan rounded">Button</a> <a href="#" class="btn-two yellow rounded">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green rounded"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>block</h2> <a href="#" class="btn-two green block">Button</a> <a href="#" class="btn-two blue block">Button</a> <a href="#" class="btn-two red block">Button</a> <a href="#" class="btn-two purple block">Button</a> <a href="#" class="btn-two cyan block">Button</a> <a href="#" class="btn-two yellow block">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green block"</span>>Button</<span class="anc">a</span>></pre> </div> </section> </div> <div class="header"> <h1>Default Buttons</h1> </div> <div class="content"> <section> <div class="container"> <h2>mini</h2> <a href="#" class="btn green mini">Button</a> <a href="#" class="btn blue mini">Button</a> <a href="#" class="btn red mini">Button</a> <a href="#" class="btn purple mini">Button</a> <a href="#" class="btn cyan mini">Button</a> <a href="#" class="btn yellow mini">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green mini"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>small</h2> <a href="#" class="btn green small">Button</a> <a href="#" class="btn blue small">Button</a> <a href="#" class="btn red small">Button</a> <a href="#" class="btn purple small">Button</a> <a href="#" class="btn cyan small">Button</a> <a href="#" class="btn yellow small">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green small"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>normal</h2> <a href="#" class="btn green">Button</a> <a href="#" class="btn blue">Button</a> <a href="#" class="btn red">Button</a> <a href="#" class="btn purple">Button</a> <a href="#" class="btn cyan">Button</a> <a href="#" class="btn yellow">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>large</h2> <a href="#" class="btn green large">Button</a> <a href="#" class="btn blue large">Button</a> <a href="#" class="btn red large">Button</a> <a href="#" class="btn purple large">Button</a> <a href="#" class="btn cyan large">Button</a> <a href="#" class="btn yellow large">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green large"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>rounded</h2> <a href="#" class="btn green rounded">Button</a> <a href="#" class="btn blue rounded">Button</a> <a href="#" class="btn red rounded">Button</a> <a href="#" class="btn purple rounded">Button</a> <a href="#" class="btn cyan rounded">Button</a> <a href="#" class="btn yellow rounded">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green rounded"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="container"> <h2>block</h2> <a href="#" class="btn green block">Button</a> <a href="#" class="btn blue block">Button</a> <a href="#" class="btn red block">Button</a> <a href="#" class="btn purple block">Button</a> <a href="#" class="btn cyan block">Button</a> <a href="#" class="btn yellow block">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button</<span class="anc">a</span>></pre> </div> </section> </div> <div class="header"> <h1>3D Buttons</h1> </div> <div class="content-3d"> <div class="btn-container"> <a href="#" class="btn-3d green">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="btn-container"> <a href="#" class="btn-3d blue">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d blue"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="btn-container"> <a href="#" class="btn-3d red">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d red"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="btn-container"> <a href="#" class="btn-3d purple">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d purple"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="btn-container"> <a href="#" class="btn-3d cyan">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d cyan"</span>>Button</<span class="anc">a</span>></pre> </div> <div class="btn-container"> <a href="#" class="btn-3d yellow">Button</a> <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d yellow"</span>>Button</<span class="anc">a</span>></pre> </div> </div>

* { box-sizing: border-box; } body { margin: 0; background: #eaedf1; font-family: 'Lato', sans-serif; } .header { background: white; padding: 30px; text-align: center; } .header h1 { font-weight: 300; display: inline; } h2 { color: #89867e; text-align: center; font-weight: 300; } .color { width: 350px; margin: 0 auto; } .color li { margin: 0 15px 0 0; width: 30px; height: 30px; display: inline-block; border-radius: 100%; } .color .red {background: #fa5a5a;} .color .yellow {background: #f0d264;} .color .green {background: #82c8a0;} .color .cyan {background: #7fccde;} .color .blue {background: #6698cb;} .color .purple {background: #cb99c5;} .content, .content-gradient, .content-3d { margin: 40px auto; } .content { width: 80%; max-width: 700px; } .content-3d { width: 50%; max-width: 300px; } pre { width: 100%; padding: 30px; background-color: rgba(0, 0, 0, 0.72); color: #f8f8f2; border-radius: 0 0 4px 4px; margin-top: 20px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } pre .bt {color: #f8f8f2;} /* <> */ pre .anc {color: #f92672;} /* anchor tag */ pre .att {color: #a6a926;} /* attribute */ pre .val {color: #e6db74;} /* value */ .btn-container, .container { background-color: white; border-radius: 4px; text-align: center; margin-bottom: 40px; } .container h2 { padding-top: 30px; font-weight: 300; } .btn, .btn-two { margin: 9px; } .btn-gradient { margin: 5px; } a[class*="btn"] {text-decoration: none;} input[class*="btn"], button[class*="btn"] {border: 0;} /* Here you can change the button sizes */ .btn.large, .btn-two.large, .btn-effect.large { padding: 20px 40px; font-size: 22px; } .btn.small, .btn-two.small, .btn-gradient.small, .btn-effect.small { padding: 8px 18px; font-size: 14px; } .btn.mini, .btn-two.mini, .btn-gradient.mini, .btn-effect.mini { padding: 4px 12px; font-size: 12px; } .btn.block, .btn-two.block, .btn-gradient.block, .btn-effect.block { display: block; width: 60%; margin-left: auto; margin-right: auto; text-align: center; } .btn-gradient.large { padding: 15px 45px; font-size: 22px; } /* Colors for .btn and .btn-two */ .btn.blue, .btn-two.blue {background-color: #7fb1bf;} .btn.green, .btn-two.green {background-color: #9abf7f;} .btn.red, .btn-two.red {background-color: #fa5a5a;} .btn.purple, .btn-two.purple {background-color: #cb99c5;} .btn.cyan, .btn-two.cyan {background-color: #7fccde;} .btn.yellow, .btn-two.yellow {background-color: #f0d264;} .rounded { border-radius: 10px; } /* default button style */ .btn { position: relative; border: 0; padding: 15px 25px; display: inline-block; text-align: center; color: white; } .btn:active { top: 4px; } /* color classes for .btn */ .btn.blue {box-shadow: 0px 4px #74a3b0;} .btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;} .btn.green {box-shadow: 0px 4px 0px #87a86f;} .btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;} .btn.red {box-shadow:0px 4px 0px #E04342;} .btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;} .btn.purple {box-shadow:0px 4px 0px #AD83A8;} .btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;} .btn.cyan {box-shadow:0px 4px 0px #73B9C9;} .btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;} .btn.yellow {box-shadow:0px 4px 0px #D1B757;} .btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;} /* Button two - I have no creativity for names */ .btn-two { color: white; padding: 15px 25px; display: inline-block; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0,0,0,0.34); text-shadow:0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0,0,0,0.21); } .btn-two:active { top: 1px; border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21); box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset; position: relative; } /* 3D Button */ .btn-3d { position: relative; display: inline-block; font-size: 22px; padding: 20px 60px; color: white; margin: 20px 10px 10px; border-radius: 6px; text-align: center; transition: top .01s linear; text-shadow: 0 1px 0 rgba(0,0,0,0.15); } .btn-3d.red:hover {background-color: #e74c3c;} .btn-3d.blue:hover {background-color: #699DD1;} .btn-3d.green:hover {background-color: #80C49D;} .btn-3d.purple:hover {background-color: #D19ECB;} .btn-3d.yellow:hover {background-color: #F0D264;} .btn-3d.cyan:hover {background-color: #82D1E3;} .btn-3d:active { top: 9px; } /* 3D button colors */ .btn-3d.red { background-color: #e74c3c; box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.red:active { box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } .btn-3d.blue { background-color: #6DA2D9; box-shadow: 0 0 0 1px #6698cb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 rgba(110, 164, 219, .7), 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.blue:active { box-shadow: 0 0 0 1px #6191C2 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } .btn-3d.green { background-color: #82c8a0; box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 rgba(126, 194, 155, .7), 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.green:active { box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } .btn-3d.purple { background-color: #cb99c5; box-shadow: 0 0 0 1px #cb99c5 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 rgba(189, 142, 183, .7), 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.purple:active { box-shadow: 0 0 0 1px #cb99c5 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } .btn-3d.cyan { background-color: #7fccde; box-shadow: 0 0 0 1px #7fccde inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 rgba(102, 164, 178, .6), 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.cyan:active { box-shadow: 0 0 0 1px #7fccde inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } .btn-3d.yellow { background-color: #F0D264; box-shadow: 0 0 0 1px #F0D264 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 rgba(196, 172, 83, .7), 0 8px 0 1px rgba(0,0,0,.4), 0 8px 8px 1px rgba(0,0,0,0.5); } .btn-3d.yellow:active { box-shadow: 0 0 0 1px #F0D264 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 0 0 1px rgba(0,0,0,0.4); } /* Gradient buttons */ .btn-gradient { text-decoration: none; color: white; padding: 10px 30px; display: inline-block; position: relative; border: 1px solid rgba(0,0,0,0.21); border-bottom: 4px solid rgba(0,0,0,0.21); border-radius: 4px; text-shadow: 0 1px 0 rgba(0,0,0,0.15); } /* Gradient - ugly css is ugly */ .btn-gradient.cyan { background: rgba(27,188,194,1); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1))); background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%); background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%); background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%); background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0); } .btn-gradient.red{ background: rgba(250,90,90,1); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1))); background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%); background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%); background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%); background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 ); } .btn-gradient.orange { background: rgba(255,105,30,1); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1))); background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%); background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%); background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%); background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%); } .btn-gradient.blue { background: rgba(102,152,203,1); background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1))); background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%); background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%); background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%); background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 ); } .btn-gradient.purple { background: rgba(203,153,197,1); background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1))); background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%); background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%); background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%); background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 ); } .btn-gradient.yellow { background: rgba(240,210,100,1); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1))); background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%); background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%); background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%); background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 ); } .btn-gradient.green { background: rgba(130,200,160,1); background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1))); background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%); background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%); background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%); background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 ); } .btn-gradient.red:active {background: #E35252;} .btn-gradient.orange:active {background: #E8601B;} .btn-gradient.cyan:active {background: #169499;} .btn-gradient.blue:active {background: #608FBF;} .btn-gradient.purple:active {background: #BD8EB7;} .btn-gradient.yellow:active {background: #DBC05B;} .btn-gradient.green:active {background: #72B08E;}