button

<!doctype html><html lang=en itemscope itemtype="https://schema.org/WebSite https://schema.org/WebApplication"><title itemprop=name>Da Button Factory: web button maker</title><link rel="canonical preconnect" itemprop=url href="https://DaButtonFactory.com/"><link rel=manifest href=/manifest.json><link rel=yandex-tableau-widget href=/yandex-tableau.json><link rel=mask-icon href=/s/1/i/mask-icon.svg color="#68e"><link rel=apple-touch-icon href=/apple-touch-icon.png><link rel=icon href=/favicon.ico><meta name=referrer content=never><meta name=viewport content="width=device-width,initial-scale=1"><meta name=theme-color content="#cef"><meta name=apple-mobile-web-app-title content="Da Button Factory"><meta itemprop=description property="og:description" name=description content="An online button generator. Design your very own button starting from one of the preset examples. Then download the image or get the CSS code. Fast & free!"><meta itemprop=alternateName property="og:title" name=application-name content="Da Button Factory"><meta itemprop=keywords name=keywords content="button,image,generator,webdesign"><meta itemprop=applicationCategory content=Graphics><meta itemprop=applicationSubCategory content="Button generator"><meta itemprop=accessibilityAPI content=ARIA><meta itemprop=accessibilityControl content=fullMouseControl><meta itemprop=accessibilityControl content=fullTouchControl><meta itemprop=accessibilityControl content=fullKeyboardControl><meta itemprop=image property="og:image" content="https://DaButtonFactory.com/s/1/i/button-generator-web-app.png"><meta property="og:url" content="https://DaButtonFactory.com/"><meta property="og:type" content=website><style>@font-face{font-family:fa;src:url(/s/3/f/fa.woff2) format("woff2"),url(/s/3/f/fa.woff) format("woff")}.fa{display:inline-block;font:11pt/1 fa;font-size:inherit;margin-right:5px}.fa-lg{font-size:1.33em;margin-right:9px;vertical-align:bottom}a{color:#35c;text-decoration:none}a:hover,a:focus{text-decoration:underline}a:active{color:#e00!important}a:visited{color:#238}#brand:active,:active>.fa{transform:scale(1.04)}body{background:#eee;font:11pt/1.5 Arial,sans-serif;margin:0 auto .5em;max-width:1600px;text-align:center}#head{background:#bde;background:linear-gradient(#cef,#bde 95%,#ace);box-shadow:0 1px 2px #666;line-height:1.2;padding:.5% .3% .5% .75%;text-align:left}#brand,#brandwrap,#brandtxt,#logo{display:inline-block}#brandwrap{text-align:left;width:40%}#brandtxt,#logo{font-size:180%;text-align:center;vertical-align:middle}#brandtxt{margin:-3px 0 0}#brandtxt>small{color:#444;display:block;font-size:50%;font-style:italic;font-weight:400;text-shadow:1px 1px 1px rgba(255,255,255,.7)}#name{color:#35c;font-variant:small-caps;text-shadow:0 1px 1px rgba(255,255,255,.7),0 -1px 1px rgba(255,255,255,.7),1px 0 1px rgba(255,255,255,.7)}#name>strong{color:#238}#brand:hover #name,#brand:focus #name{text-decoration:underline;text-shadow:none}#brand:active #name{color:#e00}.nav{display:inline;list-style:none;margin:0;padding:0}.nav>li{display:inline}.nav a,.nav span{display:inline-block;font-weight:700;padding:.6em 2em}.nav a{color:#238}#nav{display:inline-block;font-size:110%;text-align:right;text-shadow:0 1px 1px rgba(255,255,255,.7);vertical-align:middle;width:60%}#nav li{margin:0 2px}#nav a,#nav span{border-radius:3px;display:inline-block;padding:14px 5%}#nav a:hover,#nav span{background:#fafcfe}#lang{font-style:italic}#lang li+li:before{content:"\b7"}#lang a,#lang span{padding:.6em}#main{margin:0 auto;padding:0 .5%}@media(max-width:759px){#brandtxt{font-size:160%}#nav li{margin:0}}@media(min-width:760px){#logo{background:url(/s/1/i/favicon-96x96.png);background:-webkit-image-set(url(/s/1/i/favicon-96x96.png) 2x,url(/s/1/i/favicon-48x48.png) 1x);background-size:100%;height:48px;margin:0 8px 0 0;width:48px}}@media(max-width:599px){#head{padding:0}#brandwrap{display:none}.nav a,.nav span{padding:.6em 1.2em}#nav{margin:1px 0;padding:0;text-align:center;width:100%}#nav li{margin:0 1.5%}#nav a,#nav span{padding:11px 3%}body{font-size:10pt}}.fa-question:before{content:"?"}.fa-envelope:before{content:"\260e"}.fa-eye:before{content:"\2616"}.fa-cubes:before{content:"\26fd"}.fa-pencil:before{content:"\270f"}.fa-heart:before{content:"\2764"}.fa-close:before{content:"x"}.fa-download:before{content:"\25bc"}.fa-bookmark:before{content:"\2605"}.fa-code:before{content:"\271a"}.fa-undo:before{content:"\27f2"}.fa-repeat:before{content:"\27f3"}.fa-external:before{content:"\2924"}.fa-swap:before{content:"\2942"}.fa-swap{transform:rotate(90deg);vertical-align:text-bottom}.fa-close{display:none}.hidden{display:none!important}.columnset{margin:0 0 .1em;touch-action:manipulation}.columnset:after{clear:both;content:"";display:table}.columnset[aria-busy="true"] fieldset{visibility:hidden}.column{float:left;min-width:220px}.paneset{line-height:2.3;width:32%}#flex{margin:.5% 0}#firstcolumn{left:-36%;position:relative}#maincolumn{left:32%;margin:0;position:relative;vertical-align:top;width:36%;z-index:2}#preview{background:radial-gradient(at 50% 40%,#fff,#eee);margin:0 2px;overflow:auto}#err,#preview.err>#buttwrap{display:none}#preview.err>#err{display:block}#preview[aria-busy="true"]>#buttwrap,#buttdim[aria-busy="true"],#buttsiz[aria-busy="true"]{cursor:progress;opacity:.6;transition:.3s .1s opacity}#preview[aria-busy="true"] #wait,.columnset[aria-busy="true"] #wait{animation:.3s a;transition:.3s 1s visibility;visibility:visible}.columnset[aria-busy="false"] #butt{animation:.3s e;visibility:visible}#wait,#butt{display:inline-block;vertical-align:bottom;visibility:hidden}#wait{font-weight:700;margin:1.5% 0}#err{margin:4% 4px}#buttwrap{color:#444;margin:4% 4px 4px}#buttmeta{margin:5% 0 0}#buttinfo{font-size:90%}@keyframes a{0%,90%{opacity:0}}@keyframes e{0%{transform:scale(.5)}60%{transform:scale(1.1)}}button,select,input{font-size:100%;padding:2px;vertical-align:middle}button,select,.col,input[type="checkbox"]{cursor:pointer}button,select,.col{background:#eee;background:linear-gradient(#f7f7f7,#ddd);border:1px solid #999;border-radius:2px}button,input{margin:.5% 0;text-align:center}button:enabled:hover,select:hover,button:enabled:active,select:active{border-color:#666}button:enabled:hover,select:hover{background:linear-gradient(#f7f7f7,#ccc)}button::-moz-focus-inner{border:0}button:-moz-focusring{outline:1px dotted}button:enabled:active{background:#ccc;background:linear-gradient(#ccc,#f7f7f7)}button:disabled,input:disabled{color:#aaa;cursor:no-drop;font-weight:400!important}select{-webkit-appearance:menulist}input[aria-controls]+div[id]{display:none}input[aria-controls]:checked+div[id]{display:block}input[aria-invalid="true"]{color:#730}input[type="checkbox"]{height:1.1em;width:1.1em;margin-bottom:.2em}.siz{border:1px solid;border-color:#999 #aaa;border-radius:0;-moz-appearance:textfield}.siz::-webkit-inner-spin-button,.siz::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.siz[size="2"]{max-width:32px}.col,.siz[size="3"]{max-width:44px}.col::-webkit-color-swatch-wrapper{padding:1px}.col,.inc,.siz{box-sizing:border-box;height:30px;line-height:30px}.inc{border-left-width:0;border-radius:0 2px 2px 0;font-family:monospace;padding:0 8px}.dec{border-left-width:1px;border-radius:2px 0 0 2px;border-right:0}#t{max-width:66%}.pane{background:#fafcfe;background:linear-gradient(#fafcfe,#fafcfe 95%,#eef1f3);border:1px solid #def;box-shadow:0 2px 3px #666;margin:0 0 2%;padding:0;text-align:left}fieldset{border:0;margin:1% 0;padding:2% .5% 2.5%;transition:.1s background}fieldset:hover{background:#efc}fieldset.foc{background:#efa}fieldset>label:first-child{font-size:130%;font-variant:small-caps;font-weight:700;margin:2px;padding:2% 4.5% 2% 3.5%;visibility:visible}fieldset>label:first-child+input[type="checkbox"]{font-size:115%}fieldset>select,fieldset>input{margin-bottom:.3em!important;padding:4px}fieldset p{color:#444;font-size:90%;line-height:1.5;margin:1% 0 1% 5%;padding-left:.7%}fieldset label{margin-left:5%;padding:2% 2.5% 2% 1%;-moz-user-select:none;-webkit-user-select:none;user-select:none}.a{background:inherit!important;border:0;color:#35c;font-family:inherit}.a:hover,.a:focus{font-weight:700}.hist{margin:1px 2%;padding:2% 3%}#histb{float:left}#histfw{float:right}#histfw>.fa{margin:0 0 0 5px}#swapb{float:right;height:2.5em;margin:-5% 1% 0 0;padding:0 8px}.export{font-size:90%;margin:-3px auto 0;outline:0;padding:1.5%;text-align:left;width:95%}#export{margin-top:8px}#export>.a,#buttlnk{border:2px solid transparent;border-bottom:0;display:inline-block;line-height:1.5;margin:0;overflow:hidden;padding:1.5% 1%;position:relative;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:32%}#export>.a[aria-expanded="true"],.export{background:#fafcfe!important;border:2px ridge #eee;display:inline-block}#export>.a[aria-expanded="true"]{border-bottom:0;font-weight:700}textarea,#export input{font-family:monospace;font-size:90%;width:98.5%}.ios textarea,.ios #export input{font-size:16px}textarea{margin:.5% 0 .25%;overscroll-behavior:contain}p[role="alert"]{color:#730;font-weight:700;margin:0;padding:1%}hr{margin:1.5% -1%}#cssbutt{white-space:pre}#info{margin:0 auto;max-width:742px;opacity:.9;transition:.1s opacity}#info:hover{opacity:1}#info>p{margin:.3em 7px .6em;text-align:justify}#info>p a{color:#238;font-weight:700}#ad{display:inline-block;height:90px;margin:0 auto;max-width:728px;width:99%}#sad{background:#efc;border:dotted;display:none;font-size:110%;margin:0 .5em .5em;padding:.5em .6em}.sad #sad{display:inline-block}.sad ins{display:none!important}ins{display:none;transition:.3s 1s background}ins:empty{background:#ddd}#cook{-webkit-align-items:center;align-items:center;background:#fff;bottom:0;box-shadow:0 0 3px #666;display:-webkit-flex;display:flex;left:50%;position:fixed;margin:0;padding:.25em .4em .25em .5em;-webkit-transform:translateX(-50%);transform:translateX(-50%)}#cook>span{-webkit-flex-grow:1;flex-grow:1}#cook>button{margin-left:1.25em;padding:.6em .8em}@media(max-width:939px),(orientation:portrait) and (max-width:1099px){#maincolumn{box-shadow:0 1px 4px #666;left:0;margin:2px .5%;width:99%}#firstcolumn{left:0}#info{max-width:100%}#cook{box-sizing:border-box;left:0;text-align:left;-webkit-transform:none;transform:none;width:100%}#cook>button{margin-left:.5em}#preview{background:#fff;margin:0}.hist{margin:4px}.paneset{margin:.5% .5% 0;width:49%}}@media(max-width:599px){#main{padding:0}#maincolumn{font-size:11pt;margin:0;max-height:210px;max-height:40vh;overflow:auto;position:fixed;top:48px;transition:.1s transform;width:100%}#maincolumn.scroll{-webkit-transform:translateY(-48px);transform:translateY(-48px)}#maincolumn.expanded{max-height:89%}#firstcolumn{margin-top:200px;margin-top:38vh}@supports(position:sticky) or (position:-webkit-sticky){#maincolumn{margin-top:4px;position:-webkit-sticky;position:sticky;top:-1px}#firstcolumn{margin-top:0}}#ad{height:250px;width:300px}.paneset{font-size:12pt;margin:0;width:100%}.pane{background:inherit;border:0;box-shadow:none}.column{width:100%}}@media(min-width:1100px){#maincolumn{left:29%;width:42%}#firstcolumn{left:-42%}.paneset{width:29%}.a[aria-expanded="true"]>.fa-close{color:#aaa;display:inline;position:absolute;right:0;top:3px}.a:hover>.fa-close{color:#666}}@media(min-width:1400px){.columnset{font-size:110%}}@media(min-width:1500px){.columnset{margin:0 0 .6em}#main{display:inline-block;-webkit-flex-grow:1;flex-grow:1;vertical-align:top;width:1140px}#flex{display:-webkit-flex;display:flex}ins{display:inline-block;height:600px;width:160px}#ad{display:none}#ad1{margin-left:.1%}#ad2{margin-right:.1%}}@media(-ms-high-contrast:active){#preview,.pane,.a,button,select,.col{background:window}.a{border:1px solid!important}#export>.a[aria-expanded="true"],.export{border:1px solid windowtext!important}fieldset{overflow:hidden}}.sp{background:#e5e5e5;border:1px solid #666;border-radius:3px;box-shadow:0 1px 4px #666;left:0;overflow:hidden;position:fixed;top:0;touch-action:manipulation;z-index:2}.sp-top{margin-bottom:3px;position:relative;width:100%}.sp-sat,.sp-val{bottom:0;left:0;position:absolute;top:0;right:0;-ms-high-contrast-adjust:none}.sp-color,.sp-hue{border:1px solid #666;bottom:0;position:absolute;top:0;-ms-high-contrast-adjust:none}.sp-color{left:0;right:20%}.sp-hue,.sp-val{cursor:crosshair}.sp-hue{background:-webkit-linear-gradient(#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);background:linear-gradient(#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);left:84%;height:100%;right:0}.sp-sat{background:-webkit-linear-gradient(left,#fff,rgba(204,154,129,0));background:linear-gradient(to right,#fff,rgba(204,154,129,0))}.sp-val{background:-webkit-linear-gradient(rgba(204,154,129,0),#000);background:linear-gradient(rgba(204,154,129,0),#000)}.sp-fill{padding-top:80%}.sp-dragger,.sp-slider{cursor:move;position:absolute;top:0}.sp-dragger{background:#000;border:1px solid #fff;border-radius:5px;height:5px;left:0;width:5px}.sp-slider{background:#fff;border:1px solid;height:3px;left:-1px;opacity:.9;right:-1px}.sp-input,.sp-color,.sp-hue{box-sizing:border-box}.sp-picker,.sp-palette{float:left;padding:8px;position:relative}.sp-picker{border-left:2px groove #fff}.sp-row{clear:both}.sp-input{margin-bottom:3px;width:100%}.sp-button{float:right;padding:4px 10px}.sp-active{background:#ccc;background:linear-gradient(#ccc,#f7f7f7)!important}.sp-thumb{border:1px solid #ccc;color:#000;cursor:pointer;float:left;height:23px;margin:2.5px;padding:0;line-height:18px;text-align:center;width:23px;-ms-high-contrast-adjust:none}.sp-thumb-dark{color:#fff}.sp-thumb-active:before{content:"\2714";font-family:fa}.sp-thumb:hover,.sp-thumb-active{border:1px dashed!important}@media(max-width:500px){.sp{background:#666}.sp-picker,.sp-palette{padding:4px 2px}.sp-picker{width:198px}.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}.sp-picker{border:0}.sp-thumb{height:20px;width:20px}}@media(max-width:410px){.sp{max-width:204px}.sp-picker{padding:4px}.sp-button{display:none}}.sp-replacer{display:inline-block;height:32px;line-height:18px;padding:0 4px}.sp-replacer:after{content:"\25bc";font-size:8px;speak:none;vertical-align:middle}.sp-preview{border:1px solid;display:inline-block;height:20px;margin-right:5px;vertical-align:middle;width:25px;-ms-high-contrast-adjust:none}</style><div id=head role=banner><div id=brandwrap><a href=/ id=brand title="Reload the editor with the default button model" aria-current=page><div id=logo></div><h1 id=brandtxt><span id=name role=text>Da <strong>Button</strong> Factory </span><small>Pretty call-to-action buttons, quickly!</small></h1></a></div><div role=navigation id=nav aria-label="Main links"><ul class=nav><li><span title="The button generator (current page)" aria-current=page><i class="fa fa-pencil fa-lg" aria-hidden=true></i>Editor</span><li><a href=/examples title="Predefined editable buttons"><i class="fa fa-eye fa-lg" aria-hidden=true></i>Examples</a><li><a href=/info title="Frequently asked questions" itemprop=softwareHelp><i class="fa fa-question fa-lg" aria-hidden=true></i>Info</a></ul></div></div><div id=flex><ins class=adsbygoogle data-ad-client=ca-pub-5521996960555405 id=ad1></ins><div id=main><div role=main class=columnset aria-busy=true><div id=maincolumn class=column><div id=preview aria-busy=true><div><button type=button class="a hist" disabled id=histb title="Cancel the previous change"><i class="fa fa-undo" aria-hidden=true></i> Undo</button><button type=button class="a hist" disabled id=histfw title="Repeat the previous change">Redo <i class="fa fa-repeat" aria-hidden=true></i></button><p id=wait role=progressbar>Loading…</div><noscript><p role=alert>You need to <a href="https://www.enable-Javascript.com/">enable Javascript</a> for this web app to work.</noscript><div id=buttwrap><img id=butt title="Generated button – pretty isn’t it?" alt="Generated button" height=40 width=182 aria-describedby=buttinfo><div id=buttmeta><div id=buttinfo><span id=buttdim>?</span> pixels – <span id=buttsiz>?</span> bytes in <select class=noinc id=it title="Image file format"><option value=png>png<option value=gif>gif<option value=jpg>jpg<option value=ico>ico</select></div><div id=export><button type=button class=a title="Get the URL of the button and the CSS code" aria-controls=exportbutt aria-expanded=false><i class="fa fa-code" aria-hidden=true></i>Embed<i class="fa fa-close" aria-hidden=true></i></button><a id=buttlnk class=a data-basename=button title="Download the button image to your computer"><i class="fa fa-download" aria-hidden=true></i>Download</a><button type=button class=a title="Get the URL of the current workspace" aria-controls=saveed aria-expanded=false><i class="fa fa-bookmark" aria-hidden=true></i>Save<i class="fa fa-close" aria-hidden=true></i></button><div class="hidden export" id=exportbutt tabindex=-1><label>Link to the current button image:<input readonly id=butturl></label><hr><label><span role=text>Alternatively, this is <abbr title="Cascading Style Sheets">CSS</abbr> code for the button style:</span><textarea readonly id=buttcss rows=8 translate=no></textarea></label><span role=text>Rendering in <abbr title="HyperText Markup Language">HTML</abbr>+CSS gives: </span><div id=cssbutt></div></div><div class="hidden export" id=saveed tabindex=-1><label><span role=text>Edit the same button by accessing this <abbr title="Uniform Resource Locator">URL</abbr>:</span><input readonly id=edurl></label><a id=edlnk title="Open this link in a new tab/window" target=_blank><i class="fa fa-external" aria-hidden=true></i>open in new tab</a></div></div></div></div><p id=err role=alert data-generic="☹ Could not generate the button. Maybe an issue on the site, or with your connection."></div></div><div id=firstcolumn class="column paneset"><div class=pane><fieldset><label for=t>Text</label><input maxlength=824 size=24 id=t></fieldset><fieldset><label for=f>Font</label><select id=f><optgroup label="Sans serif" id=sans-serif><option value=Calibri>Calibri<option value="Open Sans">Open Sans<option value=Ubuntu>Ubuntu<option value=Roboto>Roboto<option value=Caviar>Caviar<option value=Zenhei>Zenhei (CJK support)<option value="Noto Sans">Noto (devanagari, viet)<optgroup label=Serif id=serif><option value="Droid Serif">Droid<option value=Vollkorn>Vollkorn<option value=Pagella>Gyre Pagella<option value="Playfair Display">Playfair Display<option value=Arvo>Arvo<optgroup label="Fantasy / Cursive" id=cursive><option value=Komika>Komika<option value=Pacifico>Pacifico<option value="Lobster Two">Lobster Two<option value=Overlock>Overlock<option value=Bellota>Bellota</select><div><label for=fb><b>Bold?</b></label><input type=checkbox class=noinc id=fb checked><label for=fi><i>Italic?</i></label><input type=checkbox class=noinc id=fi><div><p class=hidden>This font is not available in bold or italic.<p class=hidden>This font was in the old version but is no more selectable by default. Switch to one of the new fonts.</div><label for=ts>Size:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=3 value=24 id=ts><button type=button class=inc title=Increase tabindex=-1>+</button><label for=tcb>Color:</label><input type=color class="hidden col" value="#ffffff" id=tc><button type=button class=sp-replacer aria-haspopup=dialog id=tcb><div class=sp-preview></div></button></div></fieldset><fieldset><label for=tsh>Text shadow?</label><input type=checkbox class=noinc id=tsh aria-controls=tsho checked><div id=tsho><label for=tshs>Distance to text:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=2 value=1 id=tshs><button type=button class=inc title=Increase tabindex=-1>+</button><br><label for=tshcb>Color:</label><input type=color class="hidden col" value="#000000" id=tshc><button type=button class=sp-replacer aria-haspopup=dialog id=tshcb><div class=sp-preview></div></button></div></fieldset></div><div class=pane><fieldset><label for=st>Size</label><select class=noinc id=st aria-controls="vso fso"><option value=variable>fit to text<option value=fixed>fixed</select><div id=vso><label for=hp role=text>Horizontal padding <span aria-hidden=true>(↔︎)</span>:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=3 value=20 id=hp><button type=button class=inc title=Increase tabindex=-1>+</button><br><label for=vp role=text>Vertical padding <span aria-hidden=true>(↕︎)</span>:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=3 value=8 id=vp><button type=button class=inc title=Increase tabindex=-1>+</button></div><div class=hidden id=fso><label for=w role=text>Width <span aria-hidden=true>(↔︎)</span>:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=3 value=200 id=w><button type=button class=inc title=Increase tabindex=-1>+</button><br><label for=h role=text>Height <span aria-hidden=true>(↕︎)</span>:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=3 value=50 id=h><button type=button class=inc title=Increase tabindex=-1>+</button><p>Does not include the border or shadow size, if any.</div></fieldset></div></div><div class="column paneset"><div class=pane><fieldset><label for=s>Style</label><select class=noinc id=s aria-controls=so><option value=rounded>rounded rectangle<option value=round>fully curved sides</select><div id=so><label for=c>Corners radius:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=2 value=5 id=c><button type=button class=inc title=Increase tabindex=-1>+</button></div></fieldset><fieldset><label for=bgt>Background</label><select id=bgt aria-controls=bgo><option value=unicolored>unicolored<option value=two-colors>bicolored<option value=gradient selected>simple gradient<option value=pyramid>pyramid gradient</select><div id=bgo><label for=bgcb data-labeluni="Color:" data-labelpyr="Top & bottom color:" data-labeldef="Top color:">Top color:</label><input type=color class="hidden col" value="#3d85c6" id=bgc><button type=button class=sp-replacer aria-haspopup=dialog id=bgcb><div class=sp-preview></div></button><div id=ebgo><label for=ebgcb data-labelpyr="Center color:" data-labeldef="Bottom color:">Bottom color:</label><input type=color class="hidden col" value="#073763" id=ebgc><button type=button class=sp-replacer aria-haspopup=dialog id=ebgcb><div class=sp-preview></div></button><button type=button id=swapb title="Permute the two colors" aria-label="Permute the two colors"><i class="fa fa-swap" aria-hidden=true></i>swap</button></div><label for=be>Bubble effect?</label><input type=checkbox id=be></div></fieldset><fieldset><label for=b>Border?</label><input type=checkbox class=noinc id=b aria-controls=bo><div id=bo><label for=bs>Size:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=2 value=1 id=bs><button type=button class=inc title=Increase tabindex=-1>+</button><label for=bcb>Color:</label><input type=color class="hidden col" value="#556699" id=bc><button type=button class=sp-replacer aria-haspopup=dialog id=bcb><div class=sp-preview></div></button></div></fieldset><fieldset><label for=sh>Shadow?</label><input type=checkbox class=noinc id=sh aria-controls=shoo><div id=shoo><label for=shs>Size:</label><button type=button class="inc dec" title=Decrease tabindex=-1>−</button><input type=number class=siz pattern="[0-9]*" autocomplete=off min=0 max=1000 maxlength=4 size=2 value=1 id=shs><button type=button class=inc title=Increase tabindex=-1>+</button><label for=shcb>Color:</label><input type=color class="hidden col" value="#444444" id=shc><button type=button class=sp-replacer aria-haspopup=dialog id=shcb><div class=sp-preview></div></button><br><label for=sho>Orientation:</label><select id=sho><option value=n aria-label=north>↑︎ north<option value=s aria-label=south selected>↓︎ south<option value=e aria-label=east>→︎ east<option value=w aria-label=west>←︎ west<option value=ne aria-label=north-east>↗︎ north-east<option value=nw aria-label=north-west>↖︎ north-west<option value=se aria-label=south-east>↘︎ south-east<option value=sw aria-label=south-west>↙︎ south-west</select></div></fieldset></div></div></div><ins class=adsbygoogle data-ad-client=ca-pub-5521996960555405 id=ad></ins><a href=contact#donations id=sad>Blocking ads? We can understand. But please <b>make a donation</b> if you want this site to stay online!</a><div id=info role=contentinfo><span itemprop=offers itemscope itemtype="https://schema.org/Offer"><meta itemprop=price content=0><meta itemprop=priceCurrency content=USD></span><p>Da Button Factory lets you create appealing buttons for websites, in no time and for free. Start with the model displayed above, or use one of the <a href=/examples title="See the example buttons">other button presets</a>. Tweak the style to fit your needs, changes are applied in real time. When you are done, use the “Download” link to get the button image to your computer, or click “Embed” to directly integrate the button on a website (hotlink or CSS). <a href=/info title="Learn more about this web app" aria-label="Learn more about this web app">More info…</a><div role=navigation aria-label="Secondary links"><ul class=nav><li><a href=/api title="Learn about the Application Programming Interface of Da Button Factory"><i class="fa fa-cubes" aria-hidden=true></i>API</a><li><a href=/contact#contact title="Contact information" rel=author><i class="fa fa-envelope" aria-hidden=true></i>Contact</a><li><a href=/contact#donations title="Make a financial donation" rel=payment><i class="fa fa-heart" aria-hidden=true></i>Donate</a></ul></div><div role=navigation aria-label="Language selection" id=lang> Site language:<ul class=nav><li><span aria-current=page>english</span><li title=french><a href=/fr/ hreflang=fr lang=fr rel=alternate>français</a></ul></div></div></div><ins class=adsbygoogle data-ad-client=ca-pub-5521996960555405 id=ad2></ins></div><p id=cook class=hidden><span>By using this site, you agree to <a href=/contact#privacy rel=privacy>our cookie policy</a>.</span><button type=button>OK</button></p><script src=/s/99/app.js defer></script><script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" id=ads defer></script><div class="hidden sp" role=dialog aria-label="Choose color"><div class=sp-palette><div class=sp-row><button type=button style="background:#000000" title="#000000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#444444" title="#444444" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#666666" title="#666666" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#999999" title="#999999" class=sp-thumb></button><button type=button style="background:#cccccc" title="#cccccc" class=sp-thumb></button><button type=button style="background:#eeeeee" title="#eeeeee" class=sp-thumb></button><button type=button style="background:#f3f3f3" title="#f3f3f3" class=sp-thumb></button><button type=button style="background:#ffffff" title="#ffffff" class=sp-thumb></button></div><div class=sp-row><button type=button style="background:#ff0000" title="#ff0000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#ff9900" title="#ff9900" class=sp-thumb></button><button type=button style="background:#ffff00" title="#ffff00" class=sp-thumb></button><button type=button style="background:#00ff00" title="#00ff00" class=sp-thumb></button><button type=button style="background:#00ffff" title="#00ffff" class=sp-thumb></button><button type=button style="background:#0000ff" title="#0000ff" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#9900ff" title="#9900ff" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#ff00ff" title="#ff00ff" class="sp-thumb-dark sp-thumb"></button></div><div class=sp-row><button type=button style="background:#f4cccc" title="#f4cccc" class=sp-thumb></button><button type=button style="background:#fce5cd" title="#fce5cd" class=sp-thumb></button><button type=button style="background:#fff2cc" title="#fff2cc" class=sp-thumb></button><button type=button style="background:#d9ead3" title="#d9ead3" class=sp-thumb></button><button type=button style="background:#d0e0e3" title="#d0e0e3" class=sp-thumb></button><button type=button style="background:#cfe2f3" title="#cfe2f3" class=sp-thumb></button><button type=button style="background:#d9d2e9" title="#d9d2e9" class=sp-thumb></button><button type=button style="background:#ead1dc" title="#ead1dc" class=sp-thumb></button></div><div class=sp-row><button type=button style="background:#ea9999" title="#ea9999" class=sp-thumb></button><button type=button style="background:#f9cb9c" title="#f9cb9c" class=sp-thumb></button><button type=button style="background:#ffe599" title="#ffe599" class=sp-thumb></button><button type=button style="background:#b6d7a8" title="#b6d7a8" class=sp-thumb></button><button type=button style="background:#a2c4c9" title="#a2c4c9" class=sp-thumb></button><button type=button style="background:#9fc5e8" title="#9fc5e8" class=sp-thumb></button><button type=button style="background:#b4a7d6" title="#b4a7d6" class=sp-thumb></button><button type=button style="background:#d5a6bd" title="#d5a6bd" class=sp-thumb></button></div><div class=sp-row><button type=button style="background:#e06666" title="#e06666" class=sp-thumb></button><button type=button style="background:#f6b26b" title="#f6b26b" class=sp-thumb></button><button type=button style="background:#ffd966" title="#ffd966" class=sp-thumb></button><button type=button style="background:#93c47d" title="#93c47d" class=sp-thumb></button><button type=button style="background:#76a5af" title="#76a5af" class=sp-thumb></button><button type=button style="background:#6fa8dc" title="#6fa8dc" class=sp-thumb></button><button type=button style="background:#8e7cc3" title="#8e7cc3" class=sp-thumb></button><button type=button style="background:#c27ba0" title="#c27ba0" class=sp-thumb></button></div><div class=sp-row><button type=button style="background:#cc0000" title="#cc0000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#e69138" title="#e69138" class=sp-thumb></button><button type=button style="background:#f1c232" title="#f1c232" class=sp-thumb></button><button type=button style="background:#6aa84f" title="#6aa84f" class=sp-thumb></button><button type=button style="background:#45818e" title="#45818e" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#3d85c6" title="#3d85c6" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#674ea7" title="#674ea7" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#a64d79" title="#a64d79" class="sp-thumb-dark sp-thumb"></button></div><div class=sp-row><button type=button style="background:#990000" title="#990000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#b45f06" title="#b45f06" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#bf9000" title="#bf9000" class=sp-thumb></button><button type=button style="background:#38761d" title="#38761d" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#134f5c" title="#134f5c" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#0b5394" title="#0b5394" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#351c75" title="#351c75" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#741b47" title="#741b47" class="sp-thumb-dark sp-thumb"></button></div><div class=sp-row><button type=button style="background:#660000" title="#660000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#783f04" title="#783f04" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#7f6000" title="#7f6000" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#274e13" title="#274e13" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#0c343d" title="#0c343d" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#073763" title="#073763" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#20124d" title="#20124d" class="sp-thumb-dark sp-thumb"></button><button type=button style="background:#4c1130" title="#4c1130" class="sp-thumb-dark sp-thumb"></button></div></div><div class=sp-picker><div class=sp-top><div class=sp-fill></div><div class=sp-color><div class=sp-sat><div class=sp-val><div class=sp-dragger tabindex=-1></div></div></div></div><div class=sp-hue><div class=sp-slider tabindex=-1></div><div class=sp-1></div><div class=sp-2></div><div class=sp-3></div><div class=sp-4></div><div class=sp-5></div><div class=sp-6></div></div></div><input title="Valid input formats: hexadecimal, CSS rgb(), CSS hsl()" class=sp-input spellcheck=false autocomplete=off><button type=button class=sp-button>OK</button></div></div>

button

No comments

Social Counter

Popular

Facebook

Recent Posts