Button Generator Tools Script Using HTML,CSS,JS

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>

الإبلاغ عن إساءة الاستخدام

MS Designs

Button Generator Tools Script Using HTML,CSS,JS

About the Author

إرسال تعليق

Mandeep Singh

الإبلاغ عن إساءة الاستخدام

Button Generator Tools Script Using HTML,CSS,JS

About the Author

إرسال تعليق

Subscribe