{"id":102,"date":"2005-03-30T20:02:00","date_gmt":"2005-03-30T14:32:00","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/30\/antipixel-button-maker-for-blogs\/"},"modified":"2026-10-13T11:08:40","modified_gmt":"2026-10-13T05:38:40","slug":"antipixel-button-maker-for-blogs","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/","title":{"rendered":"How to Make Antipixel Buttons (80&#215;15 Blog Badges) in 2026"},"content":{"rendered":"<p>Do you remember <strong>antipixel buttons<\/strong>? Those tiny 80&#215;15 pixel badges were everywhere on blogs in the mid-2000s: &#8220;Powered by WordPress&#8221;, &#8220;Valid XHTML&#8221;, &#8220;RSS feed&#8221; and &#8220;Get Firefox&#8221;, each in two coloured blocks with crisp pixel text. In 2005 we pointed readers to online button makers by Luca Zappa and Adam Kalsey. Small buttons are back in fashion with the indie web, alongside their cousins, the 88&#215;31 buttons. Here&#8217;s how to make antipixel buttons in 2026, with an online tool, an image editor or pure CSS.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-26856\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/anti-pixel-button-maker.png\" alt=\"antipixel button maker\" width=\"500\" height=\"296\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/anti-pixel-button-maker.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/anti-pixel-button-maker-300x177.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/anti-pixel-button-maker-50x29.png 50w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p><strong>Quick answer:<\/strong> An antipixel button is an 80&#215;15 pixel image split into two coloured sections with small, sharp text. Make one with Adam Kalsey&#8217;s button maker, draw it pixel by pixel in a free editor like Photopea, or build it with a few lines of HTML and CSS (code below). Save images as PNG or GIF and display them at exactly 80&#215;15 pixels so the text stays crisp.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ad00b14d3369\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ad00b14d3369\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#What_are_antipixel_and_88%C3%9731_buttons\" >What are antipixel and 88&#215;31 buttons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Method_1_Use_an_online_button_maker\" >Method 1: Use an online button maker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Method_2_Draw_it_in_an_image_editor\" >Method 2: Draw it in an image editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Method_3_Make_an_antipixel_button_with_CSS\" >Method 3: Make an antipixel button with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Tips_for_using_small_buttons_today\" >Tips for using small buttons today<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#FAQ\" >FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Why_are_they_called_antipixel_buttons\" >Why are they called antipixel buttons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#What_size_is_an_antipixel_button\" >What size is an antipixel button?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2005\/03\/antipixel-button-maker-for-blogs\/#Are_88%C3%9731_buttons_the_same_thing\" >Are 88&#215;31 buttons the same thing?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_antipixel_and_88%C3%9731_buttons\"><\/span>What are antipixel and 88&#215;31 buttons?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Antipixel buttons (80&#215;15):<\/strong> named after the Antipixel blog, which popularised them around 2002. Two blocks of colour, a tiny pixel font and a thin border.<\/li>\n<li><strong>88&#215;31 buttons:<\/strong> the older and larger web badge, used since the 1990s for &#8220;Best viewed with&#8221; and link-exchange buttons. Today they&#8217;re popular again on personal sites and Neocities pages.<\/li>\n<\/ul>\n<p>Bloggers used them to show what powered their site, link to friends and offer readers an easy badge to place on their own blogs.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_1_Use_an_online_button_maker\"><\/span>Method 1: Use an online button maker<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"http:\/\/kalsey.com\/tools\/buttonmaker\/\" target=\"_blank\" rel=\"noopener\">Adam Kalsey&#8217;s button maker<\/a>, one of the tools we recommended in 2005, still generates simple 80&#215;15 buttons: choose the left and right text and colours, then download the image. Luca Zappa&#8217;s version, which also let you add small icons, is no longer online.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Method_2_Draw_it_in_an_image_editor\"><\/span>Method 2: Draw it in an image editor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Create a new 80&#215;15 pixel canvas in <a href=\"https:\/\/www.photopea.com\/\" target=\"_blank\" rel=\"noopener\">Photopea<\/a>, GIMP or any pixel-art app.<\/li>\n<li>Add a 1-pixel black border, then fill two rectangles in contrasting colours.<\/li>\n<li>Type your text with a pixel font (such as Silkscreen) at 8px, with anti-aliasing turned off so it stays sharp.<\/li>\n<li>Export as PNG or GIF.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Method_3_Make_an_antipixel_button_with_CSS\"><\/span>Method 3: Make an antipixel button with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>No image needed. This code creates a crisp, scalable 80&#215;15 button in your site&#8217;s colours:<\/p>\n<pre><code>&lt;a class=\"ap-btn\" href=\"https:\/\/www.quickonlinetips.com\/\"&gt;\n  &lt;span class=\"ap-l\"&gt;QOT&lt;\/span&gt;&lt;span class=\"ap-r\"&gt;TECH TIPS&lt;\/span&gt;\n&lt;\/a&gt;\n\n&lt;style&gt;\n.ap-btn{display:inline-flex;width:80px;height:15px;border:1px solid #000;\n  font:8px\/13px Verdana,Arial,sans-serif;text-decoration:none;overflow:hidden}\n.ap-l{background:#F28C1E;color:#fff;padding:0 3px;font-weight:bold}\n.ap-r{background:#142540;color:#fff;padding:0 3px;flex:1;text-align:center}\n&lt;\/style&gt;<\/code><\/pre>\n<p>For more image-free design tricks, see how to create <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/\">social media icons with pure CSS<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tips_for_using_small_buttons_today\"><\/span>Tips for using small buttons today<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Always add alt text (or real text, as in the CSS version) so screen readers can read the button.<\/li>\n<li>Display images at their exact size; scaling an 80&#215;15 image blurs the pixel text.<\/li>\n<li>Use them in a sidebar or footer, not in your main content.<\/li>\n<li>Link only to sites you&#8217;d vouch for; badges are links like any other.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Why_are_they_called_antipixel_buttons\"><\/span>Why are they called antipixel buttons?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>They were made popular by Jeremy Hedley&#8217;s Antipixel blog, whose small two-tone badges were widely copied.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_size_is_an_antipixel_button\"><\/span>What size is an antipixel button?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>80 pixels wide by 15 pixels tall.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Are_88%C3%9731_buttons_the_same_thing\"><\/span>Are 88&#215;31 buttons the same thing?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>They&#8217;re a related, larger badge format (88&#215;31 pixels), often with images or animation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you remember antipixel buttons? Those tiny 80&#215;15 pixel badges were everywhere on blogs in the mid-2000s: &#8220;Powered by WordPress&#8221;,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":26856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":1,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":64933,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/102\/revisions\/64933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/26856"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}