Customize your button and get the CSS code instantly!
Your email address will not be published. Required fields are marked *
![Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdhurla.com%2Fcss-button-generator%2F"e=CSS+Button+Generator&description=%3C%21--+wp%3Aimage+%7B%22id%22%3A714%2C%22sizeSlug%22%3A%22full%22%2C%22linkDestination%22%3A%22none%22%7D+--%3E%3C%21--+%2Fwp%3Aimage+--%3E%3C%21--+wp%3Ahtml+--%3E++++++++++++CSS+Button+Generator++++++++++++body+%7B+font-family%3A+Arial%2C+sans-serif%3B+text-align%3A+center%3B+padding%3A+20px%3B+%7D++++++++label+%7B+display%3A+block%3B+margin-top%3A+10px%3B+font-weight%3A+bold%3B+%7D++++++++input%2C+select+%7B+padding%3A+5px%3B+margin%3A+5px%3B+width%3A+200px%3B+%7D++++++++button+%7B+margin-top%3A+20px%3B+padding%3A+10px+20px%3B+font-size%3A+16px%3B+cursor%3A+pointer%3B+%7D++++++++.preview-container+%7B+margin-top%3A+20px%3B+%7D++++++++%23previewButton+%7B+padding%3A+10px+20px%3B+font-size%3A+16px%3B+cursor%3A+pointer%3B+%7D++++++++.code-output+%7B+background%3A+%23f4f4f4%3B+padding%3A+10px%3B+text-align%3A+left%3B+white-space%3A+pre-wrap%3B+border-radius%3A+5px%3B+%7D++++++++%F0%9F%9A%80+CSS+Button+Generator++++Customize+your+button+and+get+the+CSS+code+instantly%21++++Background+Color%3A++++++++Text+Color%3A++++++++Font+Size+%28px%29%3A++++++++Border+Radius+%28px%29%3A++++++++Padding+%28px%29%3A++++++++Hover+Color%3A++++++++Generate+CSS++++++++++++%F0%9F%94%8D+Live+Preview%3A++++++++Click+Me++++++++%F0%9F%96%A5%EF%B8%8F+CSS+Code%3A++++Your+CSS+code+will+appear+here...++++++++++++function+generateCSS%28%29+%7B++++++++++++let+bgColor+%3D+document.getElementById%28%22bgColor%22%29.value%3B++++++++++++let+textColor+%3D+document.getElementById%28%22textColor%22%29.value%3B++++++++++++let+fontSize+%3D+document.getElementById%28%22fontSize%22%29.value+%2B+%22px%22%3B++++++++++++let+borderRadius+%3D+document.getElementById%28%22borderRadius%22%29.value+%2B+%22px%22%3B++++++++++++let+padding+%3D+document.getElementById%28%22padding%22%29.value+%2B+%22px%22%3B++++++++++++let+hoverColor+%3D+document.getElementById%28%22hoverColor%22%29.value%3B++++++++++++let+cssCode+%3D+%60button+%7B++++background-color%3A+%24%7BbgColor%7D%3B++++color%3A+%24%7BtextColor%7D%3B++++font-size%3A+%24%7BfontSize%7D%3B++++border-radius%3A+%24%7BborderRadius%7D%3B++++padding%3A+%24%7Bpadding%7D%3B++++border%3A+none%3B++++cursor%3A+pointer%3B++++transition%3A+background+0.3s%3B%7Dbutton%3Ahover+%7B++++background-color%3A+%24%7BhoverColor%7D%3B%7D%60%3B++++++++++++document.getElementById%28%22output%22%29.innerText+%3D+cssCode%3B++++++++++++document.getElementById%28%22previewButton%22%29.style.backgroundColor+%3D+bgColor%3B++++++++++++document.getElementById%28%22previewButton%22%29.style.color+%3D+textColor%3B++++++++++++document.getElementById%28%22previewButton%22%29.style.fontSize+%3D+fontSize%3B++++++++++++document.getElementById%28%22previewButton%22%29.style.borderRadius+%3D+borderRadius%3B++++++++++++document.getElementById%28%22previewButton%22%29.style.padding+%3D+padding%3B++++++++%7D++++%3C%21--+%2Fwp%3Ahtml+--%3E&picture=https%3A%2F%2Fdhurla.com%2Fwp-content%2Fuploads%2F2025%2F09%2Fimage_2025-05-27_165803137-219x300-1.webp){kind=link}
