<div class="clearfix" style="margin: 0px; padding: 0px; border: 0px; color: #1e1c21; font-family: arial;">
   <h3 class="title" style="margin: 20px 10px; padding: 0px; border: 0px; color: #568eea; font-size: 26px; font-style: italic; float: left; text-shadow: rgb(255, 255, 255) 1px 1px 0px;">Button Generator</h3>
   </div>
<div class="preview" style="margin: 0px; padding: 15px; border: 1px solid rgb(225, 225, 225); border-radius: 8px; background-color: #ffffff; position: relative; color: #1e1c21; font-family: arial;">
   <table cellspacing="0" cellpadding="0" style="border-spacing: 0px; text-align: center; margin: 0px; padding: 0px; border-style: solid; border-color: #e5e5e5; background-color: #f5f5f5; height: 230px; width: 451px;">
      <tbody style="margin: 0px; padding: 0px; border: 0px;">
         <tr id="preview" style="margin: 0px; padding: 0px; border: 0px;">
            <td style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; border-color: initial;"><span class="myButton" id="myButton" style="margin: 0px; padding: 13px 32px; border: 0px; cursor: pointer; box-shadow: rgb(39, 104, 115) 0px 10px 14px -7px; background: linear-gradient(rgb(89, 155, 179) 5%, rgb(64, 140, 153) 100%) rgb(89, 155, 179); border-radius: 8px; display: inline-block; color: #ffffff; font-family: Arial; font-size: 20px; font-weight: bold; text-shadow: rgb(61, 118, 138) 0px 1px 0px;">turquoise</span></td>
            </tr>
         </tbody>
      </table>
   <div id="reset-button" style="margin: 0px; padding: 5px 6px; border: 1px solid rgb(220, 220, 220); position: absolute; right: 23px; bottom: 23px; color: #556ce7; cursor: pointer; font-size: 11px; border-radius: 4px;">Reset</div>
   <div id="colors" style="margin: -26px 0px 0px; padding: 0px; border: 0px; position: absolute; z-index: 5;">
      <div class="colors clearfix" style="margin: -7px 8px 0px 7px; padding: 6px 2px 4px 8px; border-width: 1px 1px 0px; border-style: solid; border-color: #e5e5e5; border-image: initial; float: left;">
         <div id="previewBgColor" class="color" title="Preview Box Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #f5f5f5;">&nbsp;</div>
         <div id="bgTopColor" class="color " title="Gradient Top Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #599bb3;">&nbsp;</div>
         <div id="bgBottomColor" class="color " title="Gradient Bottom Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #408c99;">&nbsp;</div>
         <div id="fontColor" class="color" title="Font Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px;">&nbsp;</div>
         <div id="borderColor" class="color" title="Border Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #29668f;">&nbsp;</div>
         <div id="boxShadowColor" class="color " title="Box Shadow Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #276873;">&nbsp;</div>
         <div id="textShadowColor" class="color " title="Text Shadow Color" style="margin: 0px 5px 0px 0px; padding: 0px; border: 1px solid rgb(191, 196, 206); box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; float: left; text-align: center; cursor: pointer; font-size: 20px; color: red; height: 20px; width: 20px; background-color: #3d768a;">&nbsp;</div>
         </div>
      <span class="check-button" style="margin: 0px 8px 0px 0px; padding: 4px 5px; border: 1px solid rgb(220, 220, 220); background-color: #ededed; border-radius: 4px; color: #777777; font-size: 11px; position: relative; top: -2px; text-shadow: rgb(248, 248, 248) 1px 1px 0px;"><input type="checkbox" class="checkbox" id="transparent" style="position: relative; top: 3px; margin: 0px;" />&nbsp;<label for="transparent" style="margin: 0px; padding: 0px; border: 0px;">transparent</label>&nbsp;</span><span class="check-button" style="margin: 0px 8px 0px 0px; padding: 4px 5px; border: 1px solid rgb(220, 220, 220); background-color: #ededed; border-radius: 4px; color: #777777; font-size: 11px; position: relative; top: -2px; text-shadow: rgb(248, 248, 248) 1px 1px 0px;"><input type="checkbox" class="checkbox" id="solid" style="position: relative; top: 3px; margin: 0px;" />&nbsp;<label for="solid" style="margin: 0px; padding: 0px; border: 0px;">no gradient</label></span></div>
   </div>
<div id="actions" style="margin: 0px; padding: 0px; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: solid; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: #dddddd; border-left-color: initial; border-image: initial; height: 150px; color: #1e1c21; font-family: arial;">
   <div class="social-buttons" style="margin: 20px 0px 20px 10px; padding: 0px; border: 0px; float: left;"><a id="fb-share-button" href="https://www.facebook.com/sharer/sharer.php?u=https://www.bestcssbuttongenerator.com/" style="margin: 0px 2px 0px 0px; padding: 4px 8px; border: 1px solid rgb(67, 96, 156); color: #ffffff; text-decoration-line: none; border-radius: 3px; display: inline-block; background-color: #43609c;" target="_blank">Share on Facebook</a>&nbsp;<a id="tweet-button" href="https://twitter.com/intent/tweet?original_referer=https://www.bestcssbuttongenerator.com/&amp;source=tweetbutton&amp;text=A%20useful%20tool%20for%20designing%20css%20buttons&amp;url=http://ow.ly/MD0Bf" style="margin: 0px 2px 0px 0px; padding: 4px 8px; border: 1px solid rgb(85, 172, 238); color: #ffffff; text-decoration-line: none; border-radius: 3px; display: inline-block; background-color: #55acee;" target="_blank">Tweet</a></div>
   <div class="copy-buttons" style="margin: 20px 10px 20px 0px; padding: 0px; border: 0px; float: right;">
      <div id="getCode-button" class="button copy-button" style="margin: 0px; padding: 4px 8px; border: 1px solid rgb(86, 137, 219); cursor: pointer; background-color: #5689db; border-radius: 3px; display: inline-block; color: #ffffff;">Get Code</div>
      </div>
   <ins class="adsbygoogle" data-ad-client="ca-pub-0557027827812402" data-ad-slot="7840994849" data-adsbygoogle-status="done" data-ad-status="filled" style="margin: 0px 0px 0px 10px; padding: 0px; border: 0px; display: inline-block; width: 468px; height: 60px;">
      <div id="aswift_2_host" tabindex="0" title="Advertisement" aria-label="Advertisement" style="margin: 0px; padding: 0px; border: none; height: 60px; width: 468px; position: relative; visibility: visible; display: inline-block;"><iframe id="aswift_2" name="aswift_2" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="468" height="60" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-0557027827812402&amp;output=html&amp;h=60&amp;slotname=7840994849&amp;adk=2938184228&amp;adf=2465766402&amp;pi=t.ma~as.7840994849&amp;w=468&amp;lmt=1682092444&amp;format=468x60&amp;url=https%3A%2F%2Fwww.bestcssbuttongenerator.com%2F&amp;wgl=1&amp;uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTEyLjAuNTYxNS4xMzgiLFtdLGZhbHNlLG51bGwsIjY0IixbWyJDaHJvbWl1bSIsIjExMi4wLjU2MTUuMTM4Il0sWyJHb29nbGUgQ2hyb21lIiwiMTEyLjAuNTYxNS4xMzgiXSxbIk5vdDpBLUJyYW5kIiwiOTkuMC4wLjAiXV0sZmFsc2Vd&amp;dt=1682092444522&amp;bpp=1&amp;bdt=605&amp;idt=250&amp;shv=r20230418&amp;mjsv=m202304060101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;prev_fmts=300x250%2C300x250&amp;correlator=626052877267&amp;frm=20&amp;pv=1&amp;ga_vid=1399177731.1682092444&amp;ga_sid=1682092445&amp;ga_hid=1319415827&amp;ga_fc=1&amp;u_tz=540&amp;u_his=1&amp;u_h=1440&amp;u_w=2560&amp;u_ah=1400&amp;u_aw=2560&amp;u_cd=24&amp;u_sd=1&amp;dmc=8&amp;adx=354&amp;ady=390&amp;biw=1278&amp;bih=1270&amp;scr_x=0&amp;scr_y=0&amp;eid=44759876%2C44759927%2C44759842%2C31071755%2C31074008%2C44782466%2C44785294&amp;oid=2&amp;pvsid=2013384039128042&amp;tmod=353874235&amp;uas=0&amp;nvt=1&amp;ref=https%3A%2F%2Fnine8007.tistory.com%2Fentry%2FCSS%25EB%25A1%259C-%25EB%25B2%2584%25ED%258A%25BC%25EC%259D%2584-%25EB%25A7%258C%25EB%2593%25A4%25EC%2596%25B4-%25EC%25A3%25BC%25EB%258A%2594-%25EC%2582%25AC%25EC%259D%25B4%25ED%258A%25B8&amp;fc=896&amp;brdim=-7%2C0%2C-7%2C0%2C2560%2C0%2C1294%2C1407%2C1278%2C1287&amp;vis=1&amp;rsz=%7C%7CaeE%7C&amp;abl=CA&amp;pfx=0&amp;fu=1024&amp;bc=31&amp;ifi=3&amp;uci=a!3&amp;fsb=1&amp;xpc=zuzXbIXQBs&amp;p=https%3A//www.bestcssbuttongenerator.com&amp;dtd=253" data-google-container-id="a!3" data-google-query-id="COCOgdWqu_4CFaZcDwIdvIIFcw" data-load-complete="true" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; left: 0px; position: absolute; top: 0px; width: 468px; height: 60px;"></iframe></div>
      </ins></div>
<p><iframe id="iframe" src="https://www.webarti.com/frame.html?ref=buttonx" width="490" height="300" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; color: #1e1c21; font-family: arial;"></iframe></p>