Button Maker :: Adam Kalsey

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Button Maker :: Adam Kalsey</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:site_name" content="Adam Kalsey"/> <meta property="og:title" content="Button Maker" /> <link rel="stylesheet" href="/styles/core.css" type="text/css"/> <link rel="alternate" type="application/rss+xml" title="RSS Feed Adam Kalsey's blog" href="/atom.xml" />  <style type="text/css"> label { width: 80px; text-align: right; padding: 0 5px; float: left; } .fltlft { width: 49%; float: left; } #main {border-bottom: 1px solid; padding-bottom: 0.5em;} #grid {background: black; border: 2px solid black; margin: 5px 4px;} #grid td {height: 11px; width: 11px; padding: 0; line-height: 11px;} #grid td a {border-bottom: none !important;} #grid td a {display: block; height: 10px; width: 10px; line-height: 10px; border: 1px solid black; border-width: 1px 0 0 1px;} a img {border: none !important;} </style> <SCRIPT LANGUAGE="Javascript" SRC="cpick.js"></SCRIPT> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1003110-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-1003110-1'); </script> <script type="text/javascript"> //<![CDATA[ var owa_baseUrl = 'https://analytics.kalsey.com/'; var owa_cmds = owa_cmds || []; owa_cmds.push(['setSiteId', '558e70f9c86def2b9daaac3426875a82']); owa_cmds.push(['trackPageView']); owa_cmds.push(['trackClicks']); (function() { var _owa = document.createElement('script'); _owa.type = 'text/javascript'; _owa.async = true; owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl ); _owa.src = owa_baseUrl + 'modules/base/dist/owa.tracker.js'; var _owa_s = document.getElementsByTagName('script')[0]; _owa_s.parentNode.insertBefore(_owa, _owa_s); }()); //]]> </script> <script data-search-pseudo-elements defer src="https://kit.fontawesome.com/15f4bb84a3.js" crossorigin="anonymous"></script> </head> <body> <div id="wrapper"> <div id="jobbanner"><p>Need someone to lead product management at your software company? I build high-craft software and the teams that build it. I'm looking for my next opportunity. <a href="/resume">Check out my resume</a> and get in touch.</p></div> <header> <div class="name"> <p><a href="/">Adam Kalsey</a></p> </div> <div id="about"> <p>This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.</p> </div> </header> <main> <form method="post" action="" name="form1"> <h1>Button Maker</h1> <p>Call it a badge, sticker, button, or whatever you'd like. Create yours below. Pick some colors, enter some text, and you'll get a button you can download for your site.</p> <p>Like the button maker? Donate to a local children's charity or <a href="http://www.cwla.org/">Child Welfare League of America</a> in <a href="http://metatalk.metafilter.com/20205/RIP-Bill-Zeller">memory of Bill Zeller</a>, who helped create it.</p> <h2 style="display: none;">Adam Adam</h2><img src="button.php?outerBorder=666666&innerBorder=ffffff&barPosition=32&leftFill=CC3333&leftText=Adam&leftTextColor=ffffff&leftTextPosition=5&rightFill=898E79&rightText=Kalsey&rightTextColor=ffffff&rightTextPosition=38" height="15" width="80" alt="" id="generated" > <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"><script>ShowPicker();</script></div> <h2>Borders</h2> <p><label for="outerBorder">Outer border</label><input name="outerBorder" type="text" id="col0" value="666666" size="20" onFocus="setCursor(0);" onBlur="colorStore('0');"><a href="javascript:;" onClick="document.form1.col0.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c0">     </span></p> <p><label for="innerBorder">Inner border</label><INPUT NAME="innerBorder" TYPE="text" id="col1" VALUE="ffffff" SIZE="20" onFocus="setCursor(1);" onBlur="colorStore('1');"><a href="javascript:;" onClick="document.form1.col1.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c1">     </span></p> <p><label for="barPostion">Bar Position</label><input name="barPosition" type="text" id="barPosition" value="32" size="20"> pixels from the left</p> <div class="twocol rel"> <h2>Left box:</h2> <p><label for="leftText">Text</label><input name="leftText" type="text" id="leftText2" value="Adam" size="20"></p> <p><label for="leftFill">Background</label><input name="leftFill" type="text" id="col2" value="CC3333" size="20" onFocus="setCursor(2);" onBlur="colorStore('2');"><a href="javascript:;" onClick="document.form1.col2.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c2">     </span></p> <p><label for="leftTextColor">Text color</label><input name="leftTextColor" type="text" id="col3" value="ffffff" size="20" onFocus="setCursor(3);" onBlur="colorStore('3');"><a href="javascript:;" onClick="document.form1.col3.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c3">     </span></p> <p><label for="leftTextPosition">Text start</label><input name="leftTextPosition" type="text" id="leftTextPosition" value="5" size="20"> pixels from the left</p> </div> <div class="twocol rel"> <h2>Right box:</h2> <p><label for="rightText">Text</label><input name="rightText" type="text" id="rightText" value="Kalsey" size="20"></p> <p><label for="rightFill">Background</label><input name="rightFill" type="text" id="col4" value="898E79" size="20" onFocus="setCursor(4);" onBlur="colorStore('4');"><a href="javascript:;" onClick="document.form1.col4.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c4">     </span></p> <p><label for="rightTextColor">Text color</label><input name="rightTextColor" type="text" id="col5" value="ffffff" size="20" onFocus="setCursor(5);" onBlur="colorStore('5');"><a href="javascript:;" onClick="document.form1.col5.focus(); MM_showHideLayers('overDiv','','show')"><img src="sel.gif" alt="Color Picker" width="15" height="13" border="0" title="Pick a color"></a><span class="pal" id="c5">     </span></p> <p><label for="rightTextPosition">Text start</label><input name="rightTextPosition" type="text" id="rightTextPosition" value="6" size="20"> pixels from the bar</p> </div> <input type="submit" name="Submit" value="Submit"> </form> </main>  <div id="sidebarcontent"> <p>The button maker is provided by Adam Kalsey. To use the button you create on your site, just right click the image and choose "Save image as..." or a similarly-named option from your browser. Check with your blogging provider for information on how to upload the image to your site after you save it.</p> <p>If you enjoy this, you might like the <a href="/blog/">blog</a>.</p> <p>Like the Button Maker's font? It's the excellent (and free) <a href="http://www.kottke.org/plus/type/silkscreen/">Silkscreen from Jason Kottke</a>.</p> <footer> <h2>Contact</h2> <address class="vcard"> <p class="fn">Adam Kalsey</p> <p class="tel"><span class="value">+1 916 600 2497</span></p> <p class="email">adam AT kalsey.com</p> <p class="resume"><a class="url" href="/resume/">Resume</a></p> <p class="publickey"><a class="url" href="/publickey.txt">Public Key</a></p> <div> <p class="social"><a class="url" href="/atom.xml"><span class="fas fa-rss-square rss"><label>RSS Feed</label></span></a></p> <p class="social"><a class="url" href="https://twitter.com/akalsey"><span class="fab fa-twitter-square twitter"><label>Twitter (akalsey)</label></span></a></p> <p class="social"><a class="url" href="https://github.com/akalsey"><span class="fab fa-github-square github"><label>Github (akalsey)</label></span></a></p> <p class="social"><a class="url" href="https://www.linkedin.com/in/adamkalsey/"><span class="fab fa-linkedin linkedin"><label>LinkedIn (adamkalsey)</label></span></a></p> </div> </address> <div class="sueme"><p>© 1999-2025 Adam Kalsey.</p></div> </footer> </div> </div> </body> </html>

CINXE.COM

Button Maker :: Adam Kalsey