"button generator"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mburakerman/pen/LkOqGp?depth=everything&order=popularity&page=46&q=generate&show_forks=false" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css'> <style class="cp-pen-styles">* { padding: 0; margin: 0; outline: none; color: #333; } h1 { font-size: 35px; } body, html { width: 100%; height: 100%; display: table; } input[type="text"]:focus { border: 1px solid #cc6666 !important; } input[type="number"]:focus { border: 1px solid #cc6666 !important; } .container { position: relative; left: 50%; margin-left: -338px; width: 676px; } h2 { font-size: 30px; margin-top: 10px; margin-bottom: 15px; } .first { position: absolute; top: -23px; left: 0; } .third { position: relative; top: 19px; left: -170px; } .generator-wrapper { position: relative; vertical-align: middle; text-align: center; width: 400px; border-radius: 4px; padding: 3px 6px; border: 1px solid #D1D1D1; margin-top: 22px; margin-right: 10px; margin-bottom: 10px; float: left; } .button-preview { position: relative; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .button-wrapper { position: relative; width: 250px; height: 150px; border-radius: 4px; border: 1px solid #D1D1D1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; float: left; } .codes-wrapper { position: relative; border-radius: 4px; clear: both; } .wrap { position: relative; } .wrap p { position: absolute; top: 10px; font-size: 12px; } .wrap:nth-child(2) p { top: 8px; } .wrap:nth-child(3) p { top: 1px; } .wrap:nth-child(4) p { top: 1px; } .wrap:nth-child(9) p { top: 12px; } .button { box-sizing: initial; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; border-radius: 4px; border: none; outline: none; font-size: 18px; color: #fff; background-color: #cc6666; text-align: center; white-space: pre; font-family: arial; margin: 0 auto; cursor: pointer; } .text { width: 200px; height: 30px; border: 1px solid #D1D1D1; border-radius: 4px; padding: 3px 6px; display: block; margin: 0 auto; } .font { width: 215px; height: 30px; border: 1px solid #D1D1D1; border-radius: 4px; padding: 3px 6px; display: block; margin: 0 auto; margin-bottom: 18px; } .font:focus { border: 1px solid #cc6666; } #font-size { width: 200px; color: #333; display: block; margin: 0 auto; } #font-size-amount { font-size: 12px; text-align: center; display: block; margin: auto; margin-top: 5px; margin-bottom: 18px; } .ui-slider { border: 1px solid #D1D1D1 !important; height: 15px !important; } .ui-slider-range { background: #333; border: none !important; } .ui-slider-handle { border: 1px solid #D1D1D1 !important; background: #fff !important; height: 25px !important; top: -6px !important; } #border-radius { width: 200px; color: #333; display: block; margin: 0 auto; } #border-radius-amount { font-size: 12px; margin-top: 5px; margin-bottom: 13px; } .padding { width: 200px; height: 30px; border: 1px solid #D1D1D1; border-radius: 4px; padding: 3px 6px; margin-bottom: 5px; } .padding:focus { border: 1px solid #33C3F0; } #hue { height: 30px; border: 1px solid #D1D1D1; border-radius: 4px; padding: 3px 30px; } .minicolors-position-left .minicolors-panel { top: 40px; left: 0; } .minicolors-theme-default .minicolors-swatch { top: 9px; } .color { display: block !important; float: left; } .background-color { display: block !important; float: left; } .background-color-hover { display: block !important; float: left; } .wrap:last-child { margin-top: 4px; } .clipboard { position: absolute; right: 140px; top: 15px; font-size: 15px; font-weight: normal; background: #333; color: #fff; padding: 3px 6px; border-radius: 4px; border: none; outline: none; cursor: pointer; display: inline-block; clear: both; } .clipboard:hover { background: #282828; } color-hover { display: block !important; float: left; } .copied-to-clipboard { width: 50px; text-align: center; position: absolute; top: 45px; right: 142px; padding: 2px; border-radius: 4px; font-size: 11px; color: #dddddd; background: rgba(0, 0, 0, 0.50); } .copied-to-clipboard:before { content: ""; position: absolute; top: -5px; left: 24px; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent rgba(0, 0, 0, 0.50) transparent; } .codes { width: 400px; border: 1px solid #D1D1D1; border-radius: 4px; padding: 3px 6px; box-sizing: border-box; display: block; margin: 18px auto; text-align: left; font-family: monospace; font-size: 15px; } .codes:active { border: 1px solid #cc6666; } .codes p { background: #fff5; display: block; } </style></head><body> <div class="container"> <!--container--> <center> <h1>Css3 Button Generator</h1></center> <div class="generator-wrapper"> <h3 class="first">Customize Area</h3> <div class="generate"> <!--generate--> <div class="wrap"> <p class="title">Text :</p> <input type="text" value="Lorem" class="text" placeholder="Text" /></br> </div> <div class="wrap"> <p class="title">Font Family :</p> <select class="font"></br> <option>Arial, Helvetica, sans-serif</option> <option>"Times New Roman", Times, serif</option> <option>"Comic Sans MS", cursive, sans-serif</option> <option>Impact, Charcoal, sans-serif</option> <option >Verdana, Geneva, sans-serif</option> <option>"Lucida Console", Monaco, monospace </option> </select> </div> <div class="wrap"> <p class="title">Font Size :</p> <div id="font-size" class="ui-slider"></div> <div id="font-size-amount">18px</div> </div> <div class="wrap"> <p class="title">Border Radius :</p> <div id="border-radius" class="ui-slider"></div> <div id="border-radius-amount">4px</div> </div> <div class="wrap"> <p class="title">Padding Left :</p> <input data-numscrubber type="number" min="0" max="50" value="10" class="padding" id="padding-left" /></br> </div> <div class="wrap"> <p class="title">Padding Right :</p> <input data-numscrubber type="number" min="0" max="50" value="10" class="padding" id="padding-right" /></br> </div> <div class="wrap"> <p class="title">Padding Top :</p> <input data-numscrubber type="number" min="0" max="50" value="5" class="padding" id="padding-top" /></br> </div> <div class="wrap"> <p class="title">Padding Bottom :</p> <input data-numscrubber type="number" min="0" max="50" value="5" class="padding" id="padding-bottom" /></br> </div> <div class="wrap"> <p class="title">Color :</p> <input type="text" id="hue" class="color" data-control="hue"> </div> <div class="wrap"> <p class="title">Background :</p> <input type="text" id="hue" class="background-color" data-control="hue"> </div> <div class="wrap"> <p class="title">Hover Color :</p> <input type="text" id="hue" class="color-hover" data-control="hue"> </div> <div class="wrap"> <p class="title">Hover Background :</p> <input type="text" id="hue" class="background-color-hover" data-control="hue"> </div> </div> <!--generate--> </div> <div class="button-preview"> <h3 class="second">Button Preview</h3> <div class="button-wrapper"> <button class="button">Lorem</button> </div> </div> <div class="codes-wrapper"> <center> <h3 class="third">Codes</h3></center> <button class="clipboard" data-clipboard-target="#codes">Copy Codes</button> <span class="copied-to-clipboard">Copied to clipboard!</span> <div class="codes" id="codes"> <span>.button {</span> <p class="line1">font-family:Arial, Helvetica, sans-serif;</p> <p class="line2">font-size:18px;</p> <p class="line3">border-radius:4px;</p> <p class="line4">padding-left:10px;</p> <p class="line5">padding-right:10px;</p> <p class="line6">padding-top:5px;</p> <p class="line7">padding-bottom:5px;</p> <p class="line8">color:#ffffff;</p> <p class="line9">background-color:#cc6666;</p> <p class="line12 auto">outline:none;</p> <p class="line13 auto">border:none;</p> <p class="line14 auto">cursor:pointer;</p> <p class="line15 auto">display:inline-block;</p> <span>}</span></br> </br> <span>.button:hover {</span> <p class="line10">color:#ffffff;</p> <p class="line11">background-color:#8e4747;</p> <span>}</span> </div> </div> </div> <!--container--> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js'></script><script src='https://cdn.rawgit.com/mburakerman/numscrubberjs/master/src/numscrubber.js'></script> <script >$(function() { $(".text").bind("change keyup input", function(e) { var writtenText = $(".text").val(); $(".button").text(writtenText); return false; }); $(".font").on("change", function(e) { var selected = $(".font option:selected").val(); $(".button").css("font-family", selected); $(".codes .line1").text("font-family:" + selected + ";"); return false; }); $("#font-size").slider({ range: "min", value: 18, min: 0, max: 40, slide: update }); function update(event, slider) { $("#font-size-amount").text(slider.value + "px"); $(".button").css("font-size", slider.value + "px"); $(".codes .line2").text("font-size:" + slider.value + "px" + ";"); } $("#border-radius").slider({ range: "min", value: 4, min: 0, max: 40, slide: radius }); function radius(event, slider) { $("#border-radius-amount").text(slider.value + "px"); $(".button").css("border-radius", slider.value + "px"); $(".codes .line3").text("border-radius:" + slider.value + "px" + ";"); } $(".padding").bind("change keyup input", function() { var paddingLeft = $("#padding-left").val(); var paddingRight = $("#padding-right").val(); var paddingTop = $("#padding-top").val(); var paddingBottom = $("#padding-bottom").val(); $(".button").css("padding-left", parseInt(paddingLeft, 10)); $(".button").css("padding-right", parseInt(paddingRight, 10)); $(".button").css("padding-top", parseInt(paddingTop, 10)); $(".button").css("padding-bottom", parseInt(paddingBottom, 10)); $(".codes .line4").text("padding-left:" + paddingLeft + "px" + ";"); $(".codes .line5").text("padding-right:" + paddingRight + "px" + ";"); $(".codes .line6").text("padding-top:" + paddingTop + "px" + ";"); $(".codes .line7").text("padding-bottom:" + paddingBottom + "px" + ";"); }); $(".color").minicolors({ defaultValue: "#ffffff" }); $(".color").on("change", function() { var color = $(".color").val(); $(".button").css("color", color); $(".codes .line8").text("color:" + color + ";"); }); $(".background-color").minicolors({ defaultValue: "#cc6666" }); $(".background-color").on("change", function() { var backgroundColor = $(".background-color").val(); $(".button").css("background-color", backgroundColor); $(".codes .line9").text("background-color:" + backgroundColor + ";"); }); $(".color-hover").on("change", function() { var hoverColor = $(".color-hover").val(); var color = $(".color").val(); $(".button").hover(function() { $(".button").css("color", hoverColor); }); $(".button").mouseout(function() { $(".button").css("color", color); }); $(".codes .line10").text("color:" + hoverColor + ";"); }); $(".background-color-hover").minicolors({ defaultValue: "#8e4747" }); $(".color-hover").minicolors({ defaultValue: "#ffffff" }); $(".background-color-hover").on("change", function() { var hoverBackground = $(".background-color-hover").val(); var backgroundColor = $(".background-color").val(); $(".button").hover(function() { $(".button").css("background-color", hoverBackground); }); $(".button").mouseout(function() { $(".button").css("background-color", backgroundColor); }); $(".codes .line11").text("background-color:" + hoverBackground + ";"); }); $(".button").hover(function() { var hoverColor = $(".color-hover").val(); var color = $(".color").val(); var hoverBackground = $(".background-color-hover").val(); var backgroundColor = $(".background-color").val(); $(".button").css("color", hoverColor); $(".button").css("background-color", hoverBackground); }); $(".button").mouseout(function() { var hoverColor = $(".color-hover").val(); var color = $(".color").val(); var hoverBackground = $(".background-color-hover").val(); var backgroundColor = $(".background-color").val(); $(".button").css("background-color", backgroundColor); $(".button").css("color", color); }); var clipboard = new Clipboard(".clipboard"); $(".copied-to-clipboard").css("opacity", 0); $(".clipboard").click(function() { $(this).html("Copied!"); $(".copied-to-clipboard").css("opacity", 1); setTimeout(function() { $(".clipboard").html("Copy codes"); $(".clipboard").prop("disabled", false); $(".copied-to-clipboard").css("opacity", 0); }, 1750); }); $(window).scroll(function() { if ($(this).scrollTop() > 150) { $(".button-preview").css("top", 400); } else { $(".button-preview").css("top", 0); } }); Numscrubber.init(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: