Hello guys, welcome to MS Designes. Today, we will discuss about how to create Button Generator tool using HTML, CSS, JS in blogger & wordpress websites
I will provide simple and short script. It is very easy to install in any platform.
Note that, please give credit to Mandeep Singh where you install this script
This tool is developed & designed by Mandeep Singh
The HTML code is here below I merge CSS & JS in single HTML code. Just copy and paste it where you want to display your tool.
Double click on the code to copy it
Live Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button Code Generator </title>
<style>
/* Button Styles */
.button {
display: ;
padding: 0.5rem 1.5rem;
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
}
.button:hover {
background-color: #0069f9;
}
/* Form Styles */
form {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
}
input[type="text"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
font-family: 'Helvetica Neue', sans-serif;
}
.overlay-credit{text-align:center;margin-top:20px;z-index:9;position:absolute;bottom:6px;right:15px;font-size:10px}
#button-code {
width: 100%;
height: 10rem;
margin-top: 1rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
font-family: 'Courier New', Courier, monospace;
font-size: 1.1rem;
white-space: pre-wrap;
word-wrap: break-word;
}
.footer {
height: 50px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: white;
}
a:hover {
color: green;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="button-text">Button Text: </label>
<input type="text" id="button-text" name="button-text">
</div>
<div class="form-group">
<label for="button-link">Button Link: </label>
<input type="text" id="button-link" name="button-link">
</div>
<div class="form-group">
<label for="button-color">Button Color: </label>
<input type="text" id="button-color" name="button-color" placeholder="#007bff">
</div>
<div class="form-group">
<label for="button-hover-color">Button Hover Color: </label>
<input type="text" id="button-hover-color" name="button-hover-color" placeholder="#0062cc">
</div>
<div class="form-group">
<label for="button-border-radius">Button Border Radius: </label>
<input type="text" id="button-border-radius" name="button-border-radius" placeholder="5px">
</div>
<div class="form-group">
<label for="button-font-size">Button Font Size: </label>
<input type="text" id="button-font-size" name="button-font-size" placeholder="1rem">
</div>
<button type="button" onclick="generateCode()" style="background-color: #0099ff; border-radius: 2px; font-size: 1rem;">Generate Code </button>
<div class="form-group">
<label for="button-code">Button Code: </label>
<textarea id="button-code" name="button-code" > </textarea>
</div>
</form>
<script>
function generateCode() {
// Get the values from the form
var buttonText = document.getElementById("button-text").value;
var buttonLink = document.getElementById("button-link").value;
var buttonColor = document.getElementById("button-color").value || "#007bff";
var buttonHoverColor = document.getElementById("button-hover-color").value || "#0062cc";
var buttonBorderRadius = document.getElementById("button-border-radius").value || "5px";
var buttonFontSize = document.getElementById("button-font-size").value || "1rem";
// Generate the button code
var buttonCode = ' <a href="' + buttonLink + '">\n';
buttonCode += ' <button class="button" style="background-color: ' + buttonColor + '; border-radius: ' + buttonBorderRadius + '; font-size: ' + buttonFontSize + ';">' + buttonText + ' </button>\n';
buttonCode += ' </a>\n';
// Set the button code textarea value
document.getElementById("button-code").value = buttonCode;
}
</script>
<div class="footer">
<p>© This tool is developed by <a href="https://mrmandeepsingh.blogspot.com/"> <b> <i>Mandeep Singh </i> </b> </a>
</p>
</div>
</body>
</html>
