{"id":4429,"date":"2025-05-22T09:55:12","date_gmt":"2025-05-22T09:55:12","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4429"},"modified":"2025-05-30T00:48:25","modified_gmt":"2025-05-30T00:48:25","slug":"button-style-generator","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/button-style-generator\/","title":{"rendered":"Button Style Generator"},"content":{"rendered":"<div class=\"ingenio-tool button-generator-wrapper\" role=\"region\" aria-labelledby=\"button-generator-title\">\r\n  <div class=\"button-generator\">\r\n    <h2 id=\"button-generator-title\">\ud83d\uddb1\ufe0f Button Style Generator<\/h2>\r\n    \r\n    <div class=\"generator-container\">\r\n      <div class=\"controls-section\">\r\n        <div class=\"control-tabs\">\r\n          <button class=\"tab-btn active\" data-tab=\"basic-tab\">Basic<\/button>\r\n          <button class=\"tab-btn\" data-tab=\"advanced-tab\">Advanced<\/button>\r\n          <button class=\"tab-btn\" data-tab=\"hover-tab\">Hover<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"tab-content active\" id=\"basic-tab\">\r\n          <div class=\"control-group\">\r\n            <label for=\"button-text\">Button Text:<\/label>\r\n            <input type=\"text\" id=\"button-text\" value=\"Click Me\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-width\">Width:<\/label>\r\n            <input type=\"range\" id=\"button-width\" min=\"50\" max=\"500\" value=\"120\">\r\n            <input type=\"number\" id=\"button-width-value\" min=\"50\" max=\"500\" value=\"120\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-height\">Height:<\/label>\r\n            <input type=\"range\" id=\"button-height\" min=\"20\" max=\"100\" value=\"40\">\r\n            <input type=\"number\" id=\"button-height-value\" min=\"20\" max=\"100\" value=\"40\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-bg\">Background:<\/label>\r\n            <input type=\"color\" id=\"button-bg\" value=\"#4CAF50\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-text-color\">Text Color:<\/label>\r\n            <input type=\"color\" id=\"button-text-color\" value=\"#ffffff\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-font-size\">Font Size:<\/label>\r\n            <input type=\"range\" id=\"button-font-size\" min=\"10\" max=\"32\" value=\"16\">\r\n            <input type=\"number\" id=\"button-font-size-value\" min=\"10\" max=\"32\" value=\"16\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"tab-content\" id=\"advanced-tab\">\r\n          <div class=\"control-group\">\r\n            <label for=\"button-border-radius\">Border Radius:<\/label>\r\n            <input type=\"range\" id=\"button-border-radius\" min=\"0\" max=\"50\" value=\"4\">\r\n            <input type=\"number\" id=\"button-border-radius-value\" min=\"0\" max=\"50\" value=\"4\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-border-width\">Border Width:<\/label>\r\n            <input type=\"range\" id=\"button-border-width\" min=\"0\" max=\"10\" value=\"0\">\r\n            <input type=\"number\" id=\"button-border-width-value\" min=\"0\" max=\"10\" value=\"0\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-border-color\">Border Color:<\/label>\r\n            <input type=\"color\" id=\"button-border-color\" value=\"#45a049\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-padding\">Padding:<\/label>\r\n            <input type=\"range\" id=\"button-padding\" min=\"0\" max=\"40\" value=\"10\">\r\n            <input type=\"number\" id=\"button-padding-value\" min=\"0\" max=\"40\" value=\"10\">\r\n            <span>px<\/span>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-font-family\">Font Family:<\/label>\r\n            <select id=\"button-font-family\">\r\n              <option value=\"Arial, sans-serif\">Arial<\/option>\r\n              <option value=\"'Helvetica Neue', sans-serif\">Helvetica<\/option>\r\n              <option value=\"'Times New Roman', serif\">Times New Roman<\/option>\r\n              <option value=\"Georgia, serif\">Georgia<\/option>\r\n              <option value=\"'Courier New', monospace\">Courier New<\/option>\r\n              <option value=\"'Trebuchet MS', sans-serif\">Trebuchet<\/option>\r\n              <option value=\"Verdana, sans-serif\">Verdana<\/option>\r\n              <option value=\"'Comic Sans MS', cursive\">Comic Sans<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"button-font-weight\">Font Weight:<\/label>\r\n            <select id=\"button-font-weight\">\r\n              <option value=\"normal\">Normal<\/option>\r\n              <option value=\"bold\">Bold<\/option>\r\n              <option value=\"lighter\">Light<\/option>\r\n              <option value=\"bolder\">Bolder<\/option>\r\n              <option value=\"100\">100<\/option>\r\n              <option value=\"200\">200<\/option>\r\n              <option value=\"300\">300<\/option>\r\n              <option value=\"400\">400<\/option>\r\n              <option value=\"500\">500<\/option>\r\n              <option value=\"600\">600<\/option>\r\n              <option value=\"700\">700<\/option>\r\n              <option value=\"800\">800<\/option>\r\n              <option value=\"900\">900<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"tab-content\" id=\"hover-tab\">\r\n          <div class=\"control-group\">\r\n            <label for=\"hover-bg\">Hover Background:<\/label>\r\n            <input type=\"color\" id=\"hover-bg\" value=\"#45a049\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"hover-text-color\">Hover Text Color:<\/label>\r\n            <input type=\"color\" id=\"hover-text-color\" value=\"#ffffff\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"hover-border-color\">Hover Border Color:<\/label>\r\n            <input type=\"color\" id=\"hover-border-color\" value=\"#3d8b40\">\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"hover-effect\">Hover Effect:<\/label>\r\n            <select id=\"hover-effect\">\r\n              <option value=\"none\">None<\/option>\r\n              <option value=\"grow\">Grow<\/option>\r\n              <option value=\"shrink\">Shrink<\/option>\r\n              <option value=\"pulse\">Pulse<\/option>\r\n              <option value=\"float\">Float<\/option>\r\n              <option value=\"color-change\">Color Change<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          \r\n          <div class=\"control-group\">\r\n            <label for=\"transition-speed\">Transition Speed:<\/label>\r\n            <input type=\"range\" id=\"transition-speed\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.3\">\r\n            <input type=\"number\" id=\"transition-speed-value\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.3\">\r\n            <span>seconds<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"presets-section\">\r\n          <h3>Button Presets<\/h3>\r\n          <div class=\"preset-buttons\">\r\n            <button class=\"preset-btn\" data-preset=\"flat\">Flat<\/button>\r\n            <button class=\"preset-btn\" data-preset=\"gradient\">Gradient<\/button>\r\n            <button class=\"preset-btn\" data-preset=\"outline\">Outline<\/button>\r\n            <button class=\"preset-btn\" data-preset=\"rounded\">Rounded<\/button>\r\n            <button class=\"preset-btn\" data-preset=\"3d\">3D<\/button>\r\n            <button class=\"preset-btn\" data-preset=\"ghost\">Ghost<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"preview-section\">\r\n        <div class=\"preview-container\">\r\n          <button id=\"button-preview\">Click Me<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"code-output\">\r\n          <h3>CSS Code<\/h3>\r\n          <textarea id=\"css-code\" readonly><\/textarea>\r\n          <div class=\"code-actions\">\r\n            <button id=\"copy-css\" class=\"action-btn\">\ud83d\udccb Copy CSS<\/button>\r\n            <button id=\"copy-html\" class=\"action-btn\">\ud83d\udccb Copy HTML<\/button>\r\n            <button id=\"reset-all\" class=\"action-btn\">\ud83d\udd04 Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"button-info\">\r\n      <h3>\u2139\ufe0f Button Styling Tips<\/h3>\r\n      <div class=\"info-content\">\r\n        <ul>\r\n          <li><strong>Contrast<\/strong>: Ensure sufficient contrast between text and background colors<\/li>\r\n          <li><strong>Size<\/strong>: Make buttons large enough to be easily clickable (minimum 40px width)<\/li>\r\n          <li><strong>Spacing<\/strong>: Add padding around text for better readability<\/li>\r\n          <li><strong>Feedback<\/strong>: Use hover effects to provide visual feedback<\/li>\r\n          <li><strong>Consistency<\/strong>: Maintain consistent button styles across your site<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .button-generator-wrapper {\r\n    background-color: var(--bg, #f5f5fa);\r\n    padding: 1rem;\r\n  }\r\n\r\n  .button-generator {\r\n    max-width: 1200px;\r\n    margin: auto;\r\n    background: var(--bg, #fff);\r\n    border-radius: 10px;\r\n    padding: 25px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\r\n  }\r\n\r\n  .button-generator h2 {\r\n    text-align: center;\r\n    font-size: 1.8rem;\r\n    color: var(--primary, #0a66c2);\r\n    margin-bottom: 1.5rem;\r\n  }\r\n\r\n  .generator-container {\r\n    display: flex;\r\n    gap: 30px;\r\n    margin-bottom: 30px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .controls-section {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .control-tabs {\r\n    display: flex;\r\n    border-bottom: 1px solid #ddd;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .tab-btn {\r\n    padding: 10px 20px;\r\n    border: none;\r\n    background: none;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    border-bottom: 3px solid transparent;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  .tab-btn.active {\r\n    border-bottom-color: var(--primary, #0a66c2);\r\n    color: var(--primary, #0a66c2);\r\n    font-weight: 500;\r\n  }\r\n\r\n  .tab-btn:hover:not(.active) {\r\n    border-bottom-color: #ccc;\r\n  }\r\n\r\n  .tab-content {\r\n    display: none;\r\n  }\r\n\r\n  .tab-content.active {\r\n    display: block;\r\n  }\r\n\r\n  .control-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .control-group label {\r\n    margin-bottom: 8px;\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n    color: #333;\r\n  }\r\n\r\n  .control-group input[type=\"range\"] {\r\n    width: 100%;\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  .control-group input[type=\"number\"] {\r\n    width: 60px;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .control-group input[type=\"color\"] {\r\n    width: 100%;\r\n    height: 40px;\r\n    padding: 2px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .control-group select {\r\n    width: 100%;\r\n    padding: 8px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    font-size: 0.9rem;\r\n  }\r\n\r\n  .control-group span {\r\n    font-size: 0.8rem;\r\n    color: #666;\r\n    margin-left: 5px;\r\n  }\r\n\r\n  .presets-section {\r\n    margin-top: 30px;\r\n  }\r\n\r\n  .presets-section h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  .preset-buttons {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n  }\r\n\r\n  .preset-btn {\r\n    padding: 8px 12px;\r\n    border: 1px solid #ddd;\r\n    background: #f5f5f5;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 0.8rem;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  .preset-btn:hover {\r\n    background: #e0e0e0;\r\n  }\r\n\r\n  .preview-section {\r\n    flex: 1;\r\n    min-width: 300px;\r\n  }\r\n\r\n  .preview-container {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 20px;\r\n    min-height: 200px;\r\n  }\r\n\r\n  #button-preview {\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .code-output {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .code-output h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.1rem;\r\n  }\r\n\r\n  #css-code {\r\n    width: 100%;\r\n    min-height: 150px;\r\n    padding: 10px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    font-family: monospace;\r\n    font-size: 0.9rem;\r\n    resize: vertical;\r\n  }\r\n\r\n  .code-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .action-btn {\r\n    padding: 8px 15px;\r\n    border: none;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 0.9rem;\r\n    transition: all 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n  }\r\n\r\n  .action-btn:hover {\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  #copy-css {\r\n    background: var(--primary, #0a66c2);\r\n    color: white;\r\n  }\r\n\r\n  #copy-css:hover {\r\n    background: var(--primary-dark, #084a9e);\r\n  }\r\n\r\n  #copy-html {\r\n    background: #4CAF50;\r\n    color: white;\r\n  }\r\n\r\n  #copy-html:hover {\r\n    background: #3e8e41;\r\n  }\r\n\r\n  #reset-all {\r\n    background: #f44336;\r\n    color: white;\r\n  }\r\n\r\n  #reset-all:hover {\r\n    background: #d32f2f;\r\n  }\r\n\r\n  .button-info {\r\n    background: #f9f9f9;\r\n    border-radius: 8px;\r\n    padding: 20px;\r\n  }\r\n\r\n  .button-info h3 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n  .info-content {\r\n    font-size: 0.9rem;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .info-content ul {\r\n    margin: 0;\r\n    padding-left: 20px;\r\n  }\r\n\r\n  .info-content li {\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  \/* Button hover effects *\/\r\n  .grow:hover {\r\n    transform: scale(1.1);\r\n  }\r\n\r\n  .shrink:hover {\r\n    transform: scale(0.9);\r\n  }\r\n\r\n  .pulse:hover {\r\n    animation: pulse 0.5s infinite alternate;\r\n  }\r\n\r\n  @keyframes pulse {\r\n    from { transform: scale(1); }\r\n    to { transform: scale(1.1); }\r\n  }\r\n\r\n  .float:hover {\r\n    box-shadow: 0 5px 15px rgba(0,0,0,0.3);\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  .color-change:hover {\r\n    filter: brightness(1.2);\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .generator-container {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .controls-section, .preview-section {\r\n      min-width: 100%;\r\n    }\r\n    \r\n    .code-actions {\r\n      flex-direction: column;\r\n    }\r\n    \r\n    .action-btn {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  \/\/ DOM elements\r\n  const tabBtns = document.querySelectorAll('.tab-btn');\r\n  const tabContents = document.querySelectorAll('.tab-content');\r\n  const previewBtn = document.getElementById('button-preview');\r\n  const cssCode = document.getElementById('css-code');\r\n  const copyCssBtn = document.getElementById('copy-css');\r\n  const copyHtmlBtn = document.getElementById('copy-html');\r\n  const resetBtn = document.getElementById('reset-all');\r\n  const presetBtns = document.querySelectorAll('.preset-btn');\r\n  \r\n  \/\/ Input elements\r\n  const buttonText = document.getElementById('button-text');\r\n  const buttonWidth = document.getElementById('button-width');\r\n  const buttonWidthValue = document.getElementById('button-width-value');\r\n  const buttonHeight = document.getElementById('button-height');\r\n  const buttonHeightValue = document.getElementById('button-height-value');\r\n  const buttonBg = document.getElementById('button-bg');\r\n  const buttonTextColor = document.getElementById('button-text-color');\r\n  const buttonFontSize = document.getElementById('button-font-size');\r\n  const buttonFontSizeValue = document.getElementById('button-font-size-value');\r\n  const buttonBorderRadius = document.getElementById('button-border-radius');\r\n  const buttonBorderRadiusValue = document.getElementById('button-border-radius-value');\r\n  const buttonBorderWidth = document.getElementById('button-border-width');\r\n  const buttonBorderWidthValue = document.getElementById('button-border-width-value');\r\n  const buttonBorderColor = document.getElementById('button-border-color');\r\n  const buttonPadding = document.getElementById('button-padding');\r\n  const buttonPaddingValue = document.getElementById('button-padding-value');\r\n  const buttonFontFamily = document.getElementById('button-font-family');\r\n  const buttonFontWeight = document.getElementById('button-font-weight');\r\n  const hoverBg = document.getElementById('hover-bg');\r\n  const hoverTextColor = document.getElementById('hover-text-color');\r\n  const hoverBorderColor = document.getElementById('hover-border-color');\r\n  const hoverEffect = document.getElementById('hover-effect');\r\n  const transitionSpeed = document.getElementById('transition-speed');\r\n  const transitionSpeedValue = document.getElementById('transition-speed-value');\r\n  \r\n  \/\/ Link range and number inputs\r\n  linkInputs(buttonWidth, buttonWidthValue);\r\n  linkInputs(buttonHeight, buttonHeightValue);\r\n  linkInputs(buttonFontSize, buttonFontSizeValue);\r\n  linkInputs(buttonBorderRadius, buttonBorderRadiusValue);\r\n  linkInputs(buttonBorderWidth, buttonBorderWidthValue);\r\n  linkInputs(buttonPadding, buttonPaddingValue);\r\n  linkInputs(transitionSpeed, transitionSpeedValue);\r\n  \r\n  \/\/ Tab switching\r\n  tabBtns.forEach(btn => {\r\n    btn.addEventListener('click', function() {\r\n      const tabId = this.dataset.tab;\r\n      \r\n      \/\/ Update active tab button\r\n      document.querySelector('.tab-btn.active').classList.remove('active');\r\n      this.classList.add('active');\r\n      \r\n      \/\/ Update active tab content\r\n      document.querySelector('.tab-content.active').classList.remove('active');\r\n      document.getElementById(tabId).classList.add('active');\r\n    });\r\n  });\r\n  \r\n  \/\/ Update button preview when any control changes\r\n  const allControls = [\r\n    buttonText, buttonWidth, buttonWidthValue, buttonHeight, buttonHeightValue,\r\n    buttonBg, buttonTextColor, buttonFontSize, buttonFontSizeValue,\r\n    buttonBorderRadius, buttonBorderRadiusValue, buttonBorderWidth, buttonBorderWidthValue,\r\n    buttonBorderColor, buttonPadding, buttonPaddingValue, buttonFontFamily, buttonFontWeight,\r\n    hoverBg, hoverTextColor, hoverBorderColor, hoverEffect, transitionSpeed, transitionSpeedValue\r\n  ];\r\n  \r\n  allControls.forEach(control => {\r\n    control.addEventListener('input', updateButtonPreview);\r\n  });\r\n  \r\n  \/\/ Apply presets\r\n  presetBtns.forEach(btn => {\r\n    btn.addEventListener('click', function() {\r\n      const preset = this.dataset.preset;\r\n      applyPreset(preset);\r\n    });\r\n  });\r\n  \r\n  \/\/ Copy CSS\r\n  copyCssBtn.addEventListener('click', function() {\r\n    cssCode.select();\r\n    document.execCommand('copy');\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyCssBtn.innerHTML;\r\n    copyCssBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyCssBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  \/\/ Copy HTML\r\n  copyHtmlBtn.addEventListener('click', function() {\r\n    const html = `<button class=\"custom-btn\" style=\"${previewBtn.getAttribute('style')}\">${buttonText.value}<\/button>`;\r\n    \r\n    \/\/ Create temporary element to copy from\r\n    const temp = document.createElement('textarea');\r\n    temp.value = html;\r\n    document.body.appendChild(temp);\r\n    temp.select();\r\n    document.execCommand('copy');\r\n    document.body.removeChild(temp);\r\n    \r\n    \/\/ Show feedback\r\n    const originalText = copyHtmlBtn.innerHTML;\r\n    copyHtmlBtn.innerHTML = '\u2705 Copied!';\r\n    setTimeout(() => {\r\n      copyHtmlBtn.innerHTML = originalText;\r\n    }, 2000);\r\n  });\r\n  \r\n  \/\/ Reset all\r\n  resetBtn.addEventListener('click', function() {\r\n    \/\/ Reset all inputs to default values\r\n    buttonText.value = 'Click Me';\r\n    buttonWidth.value = 120;\r\n    buttonWidthValue.value = 120;\r\n    buttonHeight.value = 40;\r\n    buttonHeightValue.value = 40;\r\n    buttonBg.value = '#4CAF50';\r\n    buttonTextColor.value = '#ffffff';\r\n    buttonFontSize.value = 16;\r\n    buttonFontSizeValue.value = 16;\r\n    buttonBorderRadius.value = 4;\r\n    buttonBorderRadiusValue.value = 4;\r\n    buttonBorderWidth.value = 0;\r\n    buttonBorderWidthValue.value = 0;\r\n    buttonBorderColor.value = '#45a049';\r\n    buttonPadding.value = 10;\r\n    buttonPaddingValue.value = 10;\r\n    buttonFontFamily.value = 'Arial, sans-serif';\r\n    buttonFontWeight.value = 'normal';\r\n    hoverBg.value = '#45a049';\r\n    hoverTextColor.value = '#ffffff';\r\n    hoverBorderColor.value = '#3d8b40';\r\n    hoverEffect.value = 'none';\r\n    transitionSpeed.value = 0.3;\r\n    transitionSpeedValue.value = 0.3;\r\n    \r\n    \/\/ Update preview\r\n    updateButtonPreview();\r\n  });\r\n  \r\n  \/\/ Link range and number inputs\r\n  function linkInputs(range, number) {\r\n    range.addEventListener('input', function() {\r\n      number.value = this.value;\r\n    });\r\n    \r\n    number.addEventListener('input', function() {\r\n      range.value = this.value;\r\n    });\r\n  }\r\n  \r\n  \/\/ Update button preview\r\n  function updateButtonPreview() {\r\n    \/\/ Set button text\r\n    previewBtn.textContent = buttonText.value;\r\n    \r\n    \/\/ Apply basic styles\r\n    previewBtn.style.width = `${buttonWidth.value}px`;\r\n    previewBtn.style.height = `${buttonHeight.value}px`;\r\n    previewBtn.style.backgroundColor = buttonBg.value;\r\n    previewBtn.style.color = buttonTextColor.value;\r\n    previewBtn.style.fontSize = `${buttonFontSize.value}px`;\r\n    previewBtn.style.borderRadius = `${buttonBorderRadius.value}px`;\r\n    previewBtn.style.border = `${buttonBorderWidth.value}px solid ${buttonBorderColor.value}`;\r\n    previewBtn.style.padding = `0 ${buttonPadding.value}px`;\r\n    previewBtn.style.fontFamily = buttonFontFamily.value;\r\n    previewBtn.style.fontWeight = buttonFontWeight.value;\r\n    \r\n    \/\/ Remove all hover effect classes\r\n    previewBtn.classList.remove('grow', 'shrink', 'pulse', 'float', 'color-change');\r\n    \r\n    \/\/ Apply hover effect if not none\r\n    if (hoverEffect.value !== 'none') {\r\n      previewBtn.classList.add(hoverEffect.value);\r\n    }\r\n    \r\n    \/\/ Set transition speed\r\n    previewBtn.style.transitionDuration = `${transitionSpeed.value}s`;\r\n    \r\n    \/\/ Generate CSS code\r\n    generateCSSCode();\r\n  }\r\n  \r\n  \/\/ Generate CSS code\r\n  function generateCSSCode() {\r\n    const css = `.custom-btn {\r\n  display: inline-block;\r\n  width: ${buttonWidth.value}px;\r\n  height: ${buttonHeight.value}px;\r\n  background-color: ${buttonBg.value};\r\n  color: ${buttonTextColor.value};\r\n  font-size: ${buttonFontSize.value}px;\r\n  border-radius: ${buttonBorderRadius.value}px;\r\n  border: ${buttonBorderWidth.value}px solid ${buttonBorderColor.value};\r\n  padding: 0 ${buttonPadding.value}px;\r\n  font-family: ${buttonFontFamily.value};\r\n  font-weight: ${buttonFontWeight.value};\r\n  cursor: pointer;\r\n  transition: all ${transitionSpeed.value}s ease;\r\n}\r\n\r\n.custom-btn:hover {\r\n  background-color: ${hoverBg.value};\r\n  color: ${hoverTextColor.value};\r\n  border-color: ${hoverBorderColor.value};\r\n`;\r\n\r\n    \/\/ Add hover effect CSS\r\n    switch(hoverEffect.value) {\r\n      case 'grow':\r\n        css += `  transform: scale(1.1);\\n`;\r\n        break;\r\n      case 'shrink':\r\n        css += `  transform: scale(0.9);\\n`;\r\n        break;\r\n      case 'pulse':\r\n        css += `  animation: pulse 0.5s infinite alternate;\\n`;\r\n        break;\r\n      case 'float':\r\n        css += `  box-shadow: 0 5px 15px rgba(0,0,0,0.3);\\n`;\r\n        css += `  transform: translateY(-3px);\\n`;\r\n        break;\r\n      case 'color-change':\r\n        css += `  filter: brightness(1.2);\\n`;\r\n        break;\r\n    }\r\n\r\n    css += `}`;\r\n\r\n    \/\/ Add animation keyframes if needed\r\n    if (hoverEffect.value === 'pulse') {\r\n      css += `\\n\\n@keyframes pulse {\r\n  from { transform: scale(1); }\r\n  to { transform: scale(1.1); }\r\n}`;\r\n    }\r\n\r\n    cssCode.value = css;\r\n  }\r\n  \r\n  \/\/ Apply preset styles\r\n  function applyPreset(preset) {\r\n    switch(preset) {\r\n      case 'flat':\r\n        buttonBg.value = '#3498db';\r\n        buttonTextColor.value = '#ffffff';\r\n        buttonBorderWidth.value = 0;\r\n        buttonBorderRadius.value = 0;\r\n        buttonFontWeight.value = 'bold';\r\n        hoverBg.value = '#2980b9';\r\n        hoverEffect.value = 'color-change';\r\n        break;\r\n        \r\n      case 'gradient':\r\n        \/\/ For gradient we need to set background image in CSS\r\n        buttonBg.value = '#3498db';\r\n        buttonTextColor.value = '#ffffff';\r\n        buttonBorderWidth.value = 0;\r\n        buttonBorderRadius.value = 4;\r\n        hoverBg.value = '#2980b9';\r\n        hoverEffect.value = 'float';\r\n        break;\r\n        \r\n      case 'outline':\r\n        buttonBg.value = 'transparent';\r\n        buttonTextColor.value = '#3498db';\r\n        buttonBorderWidth.value = 2;\r\n        buttonBorderColor.value = '#3498db';\r\n        buttonBorderRadius.value = 4;\r\n        hoverBg.value = '#3498db';\r\n        hoverTextColor.value = '#ffffff';\r\n        hoverEffect.value = 'grow';\r\n        break;\r\n        \r\n      case 'rounded':\r\n        buttonBg.value = '#e74c3c';\r\n        buttonTextColor.value = '#ffffff';\r\n        buttonBorderWidth.value = 0;\r\n        buttonBorderRadius.value = 20;\r\n        hoverBg.value = '#c0392b';\r\n        hoverEffect.value = 'shrink';\r\n        break;\r\n        \r\n      case '3d':\r\n        buttonBg.value = '#f39c12';\r\n        buttonTextColor.value = '#ffffff';\r\n        buttonBorderWidth.value = 0;\r\n        buttonBorderRadius.value = 4;\r\n        hoverBg.value = '#e67e22';\r\n        hoverEffect.value = 'none';\r\n        break;\r\n        \r\n      case 'ghost':\r\n        buttonBg.value = 'rgba(255,255,255,0.2)';\r\n        buttonTextColor.value = '#ffffff';\r\n        buttonBorderWidth.value = 1;\r\n        buttonBorderColor.value = '#ffffff';\r\n        buttonBorderRadius.value = 4;\r\n        hoverBg.value = 'rgba(255,255,255,0.3)';\r\n        hoverEffect.value = 'float';\r\n        break;\r\n    }\r\n    \r\n    \/\/ Update all linked inputs\r\n    buttonBorderWidthValue.value = buttonBorderWidth.value;\r\n    buttonBorderRadiusValue.value = buttonBorderRadius.value;\r\n    \r\n    \/\/ Update preview\r\n    updateButtonPreview();\r\n  }\r\n  \r\n  \/\/ Initial update\r\n  updateButtonPreview();\r\n});\r\n<\/script>\n\n\n\n<p>\ud83c\udfa8 Button Style Generator<\/p>\n\n\n\n<p>Buttons shouldn&#8217;t be boring.<br>The <strong>Button Style Generator<\/strong> lets you design pixel-perfect, stylish, responsive buttons \u2014 no CSS degree required.<\/p>\n\n\n\n<p>Whether you&#8217;re building a landing page, WordPress site, or custom UI, this tool gives you the power to <strong>create modern, copy-paste-ready buttons<\/strong> with live preview and full customization.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2702\ufe0f What It Can Do<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udfaf <strong>Choose Your Button Type<\/strong><br>Flat? Gradient? Ghost? Outlined? You pick the vibe.<\/li>\n\n\n\n<li>\ud83d\udd8d\ufe0f <strong>Customize Everything<\/strong>\n<ul class=\"wp-block-list\">\n<li>Background color<\/li>\n\n\n\n<li>Text color<\/li>\n\n\n\n<li>Border radius<\/li>\n\n\n\n<li>Font size, padding, border<\/li>\n\n\n\n<li>Hover effects<\/li>\n\n\n\n<li>Shadows (box + text)<\/li>\n\n\n\n<li>Transitions<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ud83d\uddbc\ufe0f <strong>Live Preview<\/strong><br>Instantly see your button in action as you style it.<\/li>\n\n\n\n<li>\ud83d\udccb <strong>Copy the CSS + HTML<\/strong><br>One click. Drop it into your site. You&#8217;re done.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddd1\u200d\ud83d\udcbb Who It&#8217;s For<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83e\uddd9 <strong>Web designers<\/strong> making stylish CTAs<\/li>\n\n\n\n<li>\ud83e\uddf1 <strong>Developers<\/strong> wanting clean, reusable button styles<\/li>\n\n\n\n<li>\ud83d\udda5\ufe0f <strong>WordPress users<\/strong> customizing their site without a plugin mess<\/li>\n\n\n\n<li>\ud83e\udde0 <strong>UI\/UX folks<\/strong> prototyping without the design software overhead<\/li>\n\n\n\n<li>\ud83e\uddf0 <strong>Non-coders<\/strong> who want professional results without writing CSS<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udca1 Features You\u2019ll Love<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udf13 <strong>Dark mode support<\/strong> \u2013 because buttons should shine in the dark too<\/li>\n\n\n\n<li>\ud83c\udfaf <strong>Responsive by default<\/strong> \u2013 buttons that work on all devices<\/li>\n\n\n\n<li>\u26a1 <strong>Instant code output<\/strong> \u2013 no fluff, just copy and paste<\/li>\n\n\n\n<li>\ud83d\udce6 <strong>Tailwind or vanilla CSS modes<\/strong> (optional toggle)<\/li>\n\n\n\n<li>\ud83d\udd10 <strong>Privacy-first<\/strong> \u2013 nothing is saved, nothing is tracked<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\uddea How to Use It<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Adjust the sliders and color pickers<\/li>\n\n\n\n<li>Watch the live preview update in real-time<\/li>\n\n\n\n<li>Click <strong>\u201cCopy HTML + CSS\u201d<\/strong><\/li>\n\n\n\n<li>Paste it into your project and go style on your audience \ud83d\udc85<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udc47 Try It Now<\/h2>\n\n\n\n<p>Craft beautiful buttons in seconds.<br>No login. No code bloat. Just fast, fresh design.<a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-button-style-generator\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\ud83d\uddb1\ufe0f Button Style Generator Basic Advanced Hover Button Text: Width: px Height: px Background: Text Color: Font Size: px Border Radius: px Border Width: px Border Color: Padding: px Font Family: Arial Helvetica Times New Roman Georgia Courier New Trebuchet Verdana Comic Sans Font Weight: Normal Bold Light Bolder 100 200 300 400 500 600 [&hellip;]<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/button-style-generator\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4429","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4429\/revisions"}],"predecessor-version":[{"id":4431,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4429\/revisions\/4431"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4429"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}