Check out this Cool HTML Button Generator Using css and js Designed by Kim Connell.
HTML Button Generator
HTML
[code language=”html”]
<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>
[/code]
CSS / SCSS
[code language=”css”]
body {
background-color: #f1f1f1;
}
.wrapper {
display: flex;
font-family: Lato, sans-serif;
h1 {
color: #3d3d3d;
font-family: Lato, sans-serif;
line-height: 1.3em;
text-align: center;
font-size: 24px;
}
.mobile-button {
color: #3d3d3d;
font-family: lato, sans-serif;
line-height: 1.3em;
margin: 10px;
font-size: 14px;
}
.flex-col {
padding: 10px 20px;
}
}
.controls {
display: block;
margin-left: auto;
margin-right: auto;
width: 33%;
.control-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 5px 2px;
}
input, select, label {
color:#3d3d3d;
font-family: Lato, sans-serif;
font-size: 16px;
padding: 5px;
}
}
.results-container {
width: 33%;
}
.html-container {
width:33%;
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%;
}
}
[/code]
JS / Babel
[code language=”js”]
class ButtonGen {
constructor(config) {
const
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 = [];
this.initSpectrum();
this.loadDefaults(defaults);
this.bindEvents();
this.generate();
}
spectrumConfigGen(color) {
return {
color,
showInput: true,
preferredFormat: ‘hex’,
change: () => { this.generate(); }
};
}
initSpectrum(spectrumInputs = [‘color’, ‘background-color’]) {
this.spectrumTargets = [];
spectrumInputs.forEach((id) => {
this.spectrumTargets.push(id);
$(‘#’ + id).spectrum(this.spectrumConfigGen(‘black’));
});
}
loadDefaults(config) {
for (const [key, value] of config.entries()) {
const target = $(‘#’ + key);
target.on(‘change’, () => { this.generate(); })
this.fields.push(target);
if (this.spectrumTargets.includes(key)) {
target.spectrum(‘set’, value);
} else {
target.val(value);
}
}
}
generate() {
let results = {};
this.fields.forEach(($field) => {
results[$field.attr(‘id’)] = $field.val();
});
const output = `<!–Button–>
<center>
<table align="center" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="${results.alignment}" style="padding: 10px;">
<table border="0" class="mobile-button" cellspacing="0" cellpadding="0">
<tr>
<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%">
<!–[if mso]> <![endif]–>
<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;">
<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>
</a>
<!–[if mso]> <![endif]–>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>`
$(‘.button-container’).html(output);
$(‘.html-output’).val(output);
}
bindEvents() {
$(‘#generate’).on(‘click’, () => { this.generate(); });
}
}
new ButtonGen();
[/code]
