This is a valid code, and it gives us a lot to work with.<\/p>\n
Please note<\/strong>, I am using two child elements instead of only one because I couldn\u2019t get rid of some paddings that button preserved. If anyone succeeds in styling with one child element only, please let me know This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:<\/p>\n This one is 550px wide. I believe that is more than sufficient for buttons Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners. Resetting button\u2019s default styling.<\/p>\n Setting child elements. Note that value of height property is different than line-height. That\u2019s because I have 2px shadow at the bottom. Line-height vertically centers the text within the button graphic, shadow is excluded.<\/p>\n Setting backgrounds and paddings for both child elements.<\/p>\n As I mentioned earlier, it would be more elegant if I could use BUTTON and SPAN only, but I couldn\u2019 t get rid of BUTTON paddings. Is any find a solution that uses only one child element, please let me know.<\/p>\n","protected":false},"excerpt":{"rendered":" When structuring your markup there are many paths you can choose to reach the same goal. Most of the times it\u2019s a matter of preferences which element you wish to apply on a specific spot. I have my own personal preferences. One of them is preferring BUTTON over INPUT type=”submit” elements. Why? Well W3C says […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,5,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/124"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\":)\"](\"http:\/\/cssglobe.com\/wp-includes\/images\/smilies\/icon_smile.gif\"){kind=icon}
<\/p>\nConcept<\/h3>\n
\nSo, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.<\/p>\n
\nTo make sure that the text is vertically centered I use line-height property.<\/p>\nCSS<\/h3>\n
button{\r\n\tborder:none;\r\n\tbackground:none;\r\n\tpadding:0;\r\n\tmargin:0;\r\n\twidth:auto;\r\n\toverflow:visible;\t\t\t\t\t\r\n\ttext-align:center;\t\r\n\twhite-space:nowrap;\t\r\n\theight:40px;\r\n\tline-height:38px;\t\t\t\r\n\t}<\/pre>\nbutton span, button em{\r\n\tdisplay:block;\r\n\theight:40px;\r\n\tline-height:38px;\t\t\t\r\n\tmargin:0;\r\n\tcolor:#954b05;\r\n\t}<\/pre>\nbutton span{\r\n\tpadding-left:20px;\r\n\tbackground:url(bg_button.gif) no-repeat 0 0;\r\n\t}\t\r\nbutton em{\r\n\tfont-style:normal;\r\n\tpadding-right:20px;\r\n\tbackground:url(bg_button.gif) no-repeat 100% 0;\r\n\t}<\/pre>\n