{"id":50,"date":"2005-07-17T19:07:08","date_gmt":"2005-07-17T10:07:08","guid":{"rendered":"http:\/\/chinkoclub.s345.xrea.com\/blog.252523.net\/?p=50"},"modified":"2013-02-01T23:12:10","modified_gmt":"2013-02-01T14:12:10","slug":"css_buttons","status":"publish","type":"post","link":"http:\/\/252523.net\/blog\/archives\/css_buttons","title":{"rendered":"Buttons Customization with CSS (unprofitable labor !)"},"content":{"rendered":"<p>I tried to thinking about customization of buttons.<\/p>\n\n<p>On the receiving side, is only paste. I wont any form about variation from original.<\/p>\n\n<p>After all, I found an uncool way. (inactive with IE)<\/p>\n\n<p>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/252523.net\/blog\/wp-content\/uploads\/20050517_button_exam.png\" alt=\"Buttons example\" width=\"500\" height=\"210\" class=\"aligncenter size-full wp-image-683 colorbox-50\" srcset=\"http:\/\/252523.net\/blog\/wp-content\/uploads\/20050517_button_exam.png 500w, http:\/\/252523.net\/blog\/wp-content\/uploads\/20050517_button_exam-300x126.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/>\n<\/p>\n\n<!--more-->\n\n<p>\n<ul>\n    <li>Primarily,  make some image files for be ready.<\/li>\n    <li>Standard button size is 15&#215;180 pixel. and the size in this case 13&#215;178 pixel. Decrement of 2 pixel as border width. <\/li>\n    <li>To support transparence, imege file format have to go with &#8220;png&#8221; or &#8220;gif&#8221;.<\/li>\n    <li>When readiness. Drive keyboard to writing CSS.<br \/>\nFor instance.\n<code>img {\n    background: #aaa; \n    border: 1px solid #fff;\n    }\nimg:hover {\n    background: #666; \n    border: 1px solid #666;\n    }\nimg#flickr:hover {\n    background: #0066CC; \n    border: 1px solid #FF99CC;\n    }<\/code><\/li>\n    <li>This function is able to changing background and border color without graphic tool. Only rewrite CSS code.\n<\/li>\n<\/ul>\n<\/p>\n\n<p>So, is a futile and unproductive craft. There are more nice technic in  <a href=\"http:\/\/wellstyled.com\/css-inline-buttons.html\">Inline Buttons<\/a> and <a href=\"http:\/\/www.sovavsiti.cz\/css\/w3c_buttons.html\">W3C buttons without images<\/a>. Though I know that, I try another to kill time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I tried to thinking about customization of buttons. On the receiving side, is only paste. I wont any form abou [&#8230;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-50","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":5,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":682,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions\/682"}],"wp:attachment":[{"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/252523.net\/blog\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}