Button Generator - Open Source Tool

Button Generator - Open Source Tool

This open source button generator tool will help you to generate css3 buttons easily and generate CSS code for that you can easily customise your button according to your requirements.

What's happening friends today we are going to build Button Generator

As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

Save It As index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>HTML Email Button Generator</title><link rel='stylesheet' href='https://bgrins.github.io/spectrum/spectrum.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700"'><link rel="stylesheet" href="css/style.css"></head><body><div class="wrapper"><div class="controls flex-col"><h1>Customize Your Button</h1><div class="control-row"><label for="background-color">Background Color:</label><input type="text" id="background-color"/></div><div class="control-row"><label for="color">Font Color:</label><input type="text" id="color"/></div><div class="control-row"><label for="border-radius">Border-radius:</label><input type="number" id="border-radius" min="0" max="99"/></div><div class="control-row"><label for="font">Font:</label><select name="font" id="font"><option value="Arial, sans-serif">Arial</option><option value="Arial Black, Arial, sans-serif">Arial Black</option><option value="Century Gothic, Times, serif">Century Gothic</option><option value="Courier, monospace">Courier</option><option value="Courier New, monospace">Courier New</option><option value="Geneva, Tahoma, Verdana, sans-serif">Geneva</option><option value="Georgia, Times, Times New Roman, serif">Georgia</option><option value="Helvetica, Arial, sans-serif">Helvetica</option><option value="Lucida, Geneva, Verdana, sans-serif">Lucida</option><option value="Tahoma, Verdana, sans-serif">Tahoma</option><option value="Times, Times New Roman, Baskerville, Georgia, serif">Times</option><option value="Times New Roman, Times, Georgia, serif">Times New Roman</option><option value="Verdana, Geneva, sans-serif">Verdana</option></select></div><div class="control-row"><label for="font-size">Font-size:</label><input type="number" name="font-size" id="font-size" min="12" max="40"/></div><div class="control-row"><label for="alignment">Alignment:</label><select name="alignment" id="alignment"><option value="left">Left</option><option value="center">Center</option><option value="right">Right</option></select></div><div class="control-row"><label for="text">Button Text:</label><input type="text" id="text"></text></div><div class="control-row"><label for="href">Link Address:</label><input type="text" id="href"></text></div></div><div class="results-container flex-col"><h1>Preview Your Button</h1><div class="button-container"></div></div><div class="html-container flex-col"><h1>Copy Your Code</h1><div><textarea class="html-output" readonly="readonly" onclick="this.focus();this.select()" rows="15"></textarea></div><div class="mobile-button">Optional:add this to your CSS if you'd like a full-width button on smaller screens:</div><div><textarea readonly="readonly" onclick="this.focus();this.select()">@media only screen and (min-width:10px) and (max-width:500px){.mobile-button{width:100%}}</textarea></div></div>
</div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://bgrins.github.io/spectrum/spectrum.js'></script><script src="js/index.js"></script></body></html>

In this HTML code I have included some features but if you want any other features you can also add them.
Without CSS our this script (Button Generator) will never look marvelous. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.

CSS Libraries used in this tool are:


Javascript Libraries Used in this tool are:


So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

Save It As style.css :

body{background-color:#f1f1f1}.wrapper{display:flex;font-family:Lato, sans-serif}.wrapper h1{color:#3d3d3d;font-family:Lato, sans-serif;line-height:1.3em;text-align:center;font-size:24px}.wrapper .mobile-button{color:#3d3d3d;font-family:lato, sans-serif;line-height:1.3em;margin:10px;font-size:14px}.wrapper .flex-col{padding:10px 20px}.controls{display:block;margin-left:auto;margin-right:auto;width:33%}.controls .control-row{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:5px 2px}.controls input, .controls select, .controls label{color:#3d3d3d;font-family:Lato, sans-serif;font-size:16px;padding:5px}.results-container{width:33%}.html-container{width:33%}.html-container textarea{color:#3d3d3d;display:block;font-family:Lato, sans-serif;font-size:16px;height:auto;margin-left:auto;margin-right:auto;padding:10px;width:90%}@media (max-width:700px){h1{text-align:left !important}.wrapper{flex-flow:row wrap;width:100%;padding:0}.flex-col{flex:100%}}
The customisation of the school is not so much beautiful but it looks nice.
So we have written HTML markup and customised it and now we will add some functionality in this project (Button Generator).

To make this project (Button Generator) work properly for that we will use JavaScript.

So here is a JavaScript for our project (Button Generator) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

Save It As index.js :

var _slicedToArray = function () {function sliceIterator(arr, i) {var _arr = [];var _n = true;var _d = false;var _e = undefined;try {for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {_arr.push(_s.value);if (i && _arr.length === i) break;}} catch (err) {_d = true;_e = err;} finally {try {if (!_n && _i["return"]) _i["return"]();} finally {if (_d) throw _e;}}return _arr;}return function (arr, i) {if (Array.isArray(arr)) {return arr;} else if (Symbol.iterator in Object(arr)) {return sliceIterator(arr, i);} else {throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var ButtonGen = function () {
function ButtonGen(config) {_classCallCheck(this, ButtonGen);
defaults = config || new Map([
["color", "white"],
["border-radius", "5"],
["font", "Helvetica, Arial, sans-serif"],
["font-size", "16"],
["alignment", "center"],
["text", "Click Here"],
["href", "#"],
["background-color", "#2b3138"]]);
this.fields = [];
}_createClass(ButtonGen, [{ key: "spectrumConfigGen", value: function spectrumConfigGen(
color) {var _this = this;
return {
color: color,
showInput: true,
preferredFormat: "hex",
change: function change() {_this.generate();} };
} }, { key: "initSpectrum", value: function initSpectrum()
{var _this2 = this;var spectrumInputs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ["color", "background-color"];
this.spectrumTargets = [];
spectrumInputs.forEach(function (id) {
$("#" + id).spectrum(_this2.spectrumConfigGen("black"));
} }, { key: "loadDefaults", value: function loadDefaults(
config) {var _this3 = this;var _iteratorNormalCompletion = true;var _didIteratorError = false;var _iteratorError = undefined;try {
for (var _iterator = config.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {var _step$value = _slicedToArray(_step.value, 2),key = _step$value[0],value = _step$value[1];
var target = $("#" + key);
target.on("change", function () {_this3.generate();});
if (this.spectrumTargets.includes(key)) {
target.spectrum("set", value);
} else {
}} catch (err) {_didIteratorError = true;_iteratorError = err;} finally {try {if (!_iteratorNormalCompletion && _iterator.return) {_iterator.return();}} finally {if (_didIteratorError) {throw _iteratorError;}}}
} }, { key: "generate", value: function generate()
var results = {};
this.fields.forEach(function ($field) {
results[$field.attr("id")] = $field.val();
var output = "<!--Button-->\n<center>\n <table align="center" cellspacing="0" cellpadding="0" width="100%">\n
<td align="" +
results.alignment + "" style="padding: 10px;">\n
<table border="0" class="mobile-button" cellspacing="0" cellpadding="0">\n
<td align="" +
results.alignment + "" bgcolor="" + results["background-color"] + "" style="background-color: " + results["background-color"] + "; margin: auto; max-width: 600px; -webkit-border-radius: " + results["border-radius"] + "px; -moz-border-radius: " + results["border-radius"] + "px; border-radius: " + results["border-radius"] + "px; padding: 15px 20px; " width="100%">\n
<!--[if mso]> <![endif]-->\n
<a href="" +
results.href + "" target="_blank" style="" + results["font-size"] + "px; font-family: " + results["font"] + "; color: " + results.color + "; font-weight:normal; text-align:center; background-color: " + results["background-color"] + "; text-decoration: none; border: none; -webkit-border-radius: " + results["border-radius"] + "px; -moz-border-radius: " + results["border-radius"] + "px; border-radius: " + results["border-radius"] + "px; display: inline-block;">\n
<span style="font-size: " +
results["font-size"] + "px; font-family: " + results["font"] + "; color: " + results.color + "; font-weight:normal; line-height:1.5em; text-align:center;">" + results.text + "</span>\n
<!--[if mso]> <![endif]-->\n
</tr>\n </table>\n</center>";
} }, { key: "bindEvents", value: function bindEvents()
{var _this4 = this;
$("#generate").on("click", function () {_this4.generate();});
} }]);return ButtonGen;}();
new ButtonGen();
If you add more features in your HTML code then you have to update your JavaScript code.

Outcome :

So here we are, We have done and our project Button Generator is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.

  • Button Generator
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Button Generator) File :

Button Generator.zip
File Size 4.95 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.
Thank you !

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}