{"id":99,"date":"2011-03-06T11:21:41","date_gmt":"2011-03-06T03:21:41","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=99"},"modified":"2018-09-02T22:37:13","modified_gmt":"2018-09-02T14:37:13","slug":"essential-css-properties-for-using-a-background-image-on-a-html-submit-button","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/essential-css-properties-for-using-a-background-image-on-a-html-submit-button\/","title":{"rendered":"Essential css properties for using a background image on a html submit button"},"content":{"rendered":"<p>There are times when you feel that the default look of a submit button is just not enough for your webpage. One way to change the default look of your submit button is to use a background image. In this post, I document my attempt in using a background image for my submit button in the <strong>search this blog<\/strong> section of my blog.<\/p>\n<p><img decoding=\"async\" title=\"A snapshot of the search this blog section of my blog\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/blog-search-form-v1.gif\" alt=\"A snapshot of the search this blog section of my blog\" \/><\/p>\n<p>The first approach that I took to change the default appearance of my submit button was to set the <strong>background-image<\/strong>, <strong>height <\/strong>and the <strong>width<\/strong> css properties via the <strong>#searchsubmit<\/strong> css id:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#searchsubmit {\r\n    background-image: url(&quot;http:\/\/www.techcoil.com\/img\/blog\/search-button.png&quot;);\r\n    height: 30px;\r\n    width: 75px;\r\n}\r\n<\/pre>\n<p>However, the result was not as I had expected:<\/p>\n<p><img decoding=\"async\" title=\"The appearance of the search button appears gibberish\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/blog-search-form-v1-nae.gif\" alt=\"The appearance of the search button appears gibberish\" \/><\/p>\n<p>Some redundant visual elements that were rendered along with the background image:<\/p>\n<ul>\n<li>The text <strong>Search<\/strong> from the <strong>value<\/strong> attribute of the submit button.<\/li>\n<li>The background color of the submit button.<\/li>\n<li>The border of the submit button.<\/li>\n<\/ul>\n<h4>Removing the text from the submit button<\/h4>\n<p>To remove the text, the first place that I looked at was the html code of the submit button:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;submit&quot; id=&quot;searchsubmit&quot; value=&quot;Search&quot;\/&gt;\r\n<\/pre>\n<p>Intuitively, one quick way that I thought of was to remove the text from the <strong>value<\/strong> attribute:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;submit&quot; id=&quot;searchsubmit&quot; value=&quot;&quot;&gt;\r\n<\/pre>\n<p>Surely, by removing the text from the html code, it would not appear on the background image. However, because the text was removed from the html code, screen readers would not be able to read it. Hence, a visually impaired user would not be able to know that the submit button is for submitting search queries. Hence, a better alternative was to use the <strong>text-align<\/strong> css property with a large negative value to push the text out of the screen:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\ntext-align: -9999px;\r\n<\/pre>\n<h4>Removing the background color<\/h4>\n<p>Because my background image has some transparent portions, I would need to prevent the browser from rendering any background color. To do that, I set the <strong>background-color<\/strong> css property to transparent:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nbackground-color: transparent;\r\n<\/pre>\n<h4>Removing the border<\/h4>\n<p>The default button rendered by the browser is rectangular in shape and that does not go very well with my background image which takes the shape of an arrow. Hence, I would need to prevent the browser from displaying any border for the submit button:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nborder: 0;\r\n<\/pre>\n<h4>Other issues<\/h4>\n<p>By now, the appearance of the button will look as expected, but the user experience aspect of it still remains an issue:<\/p>\n<p><img decoding=\"async\" title=\"The mouse cursor did not change and there was no indication that the button was hovered\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/blog-search-form-v1-nae2.gif\" alt=\"The mouse cursor did not change and there was no indication that the button was hovered\" \/><\/p>\n<p>Upon hovering my mouse over the submit button, there was no indication that the submit button was click-able. Just like the regular submit button, the cursor should change into another icon and a different background image should be applied to indicate a changed state:<\/p>\n<p><img decoding=\"async\" title=\"A snapshot of the search this blog section when the mouse hovers over the submit button\" src=\"https:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/blog-search-form-v1-hovered.gif\" alt=\"A snapshot of the search this blog section when the mouse hovers over the submit button\" \/><\/p>\n<p>To achieve the above effect, I use the cursor <strong>css<\/strong> property:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncursor: pointer;\r\n<\/pre>\n<p>and the <strong>:hover<\/strong> css pseudo-class:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#searchsubmit:hover {\r\n    background-image: url(&quot;http:\/\/www.techcoil.com\/img\/blog\/search-button-hovered.png&quot;);\r\n}\r\n<\/pre>\n<h3>Consolidating the css styles<\/h3>\n<p>The following is a consolidation of the css styles that I had discussed in this post:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n#searchsubmit {\r\n    background-color: transparent;\r\n    background-image: url(&quot;http:\/\/www.techcoil.com\/img\/blog\/search-button.png&quot;);\r\n    border: 0;\r\n    cursor: pointer;\r\n    height: 30px;\r\n    text-indent: -9999px;\r\n    width: 75px;\r\n}\r\n\r\n#searchsubmit:hover {\r\n    background-image: url(&quot;http:\/\/www.techcoil.com\/img\/blog\/search-button-hovered.png&quot;);\r\n}\r\n<\/pre>\n\n      <ul id=\"social-sharing-buttons-list\">\n        <li class=\"facebook\">\n          <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwp.me%2Fp245TQ-1B\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n            <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Facebook.png\" alt=\"Facebook icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"twitter\">\n          <a href=\"https:\/\/twitter.com\/intent\/tweet?text=&url=https%3A%2F%2Fwp.me%2Fp245TQ-1B&via=Techcoil_com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Twitter.png\" alt=\"Twitter icon\"> Tweet\n          <\/a>\n        <\/li>\n        <li class=\"linkedin\">\n          <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=1&title=&url=https%3A%2F%2Fwp.me%2Fp245TQ-1B&source=https:\/\/www.techcoil.com\" target=\"_blank\" role=\"button\" rel=\"nofollow\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/linkedin.png\" alt=\"Linkedin icon\"> Share\n          <\/a>\n        <\/li>\n        <li class=\"pinterest\">\n          <a href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Fwww.techcoil.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F99&description=\" class=\"pin-it-button\" target=\"_blank\" role=\"button\" rel=\"nofollow\" count-layout=\"horizontal\">\n          <img decoding=\"async\" src=\"\/ph\/img\/3rd-party\/social-icons\/Pinterest.png\" alt=\"Pinterest icon\"> Save\n          <\/a>\n        <\/li>\n      <\/ul>\n    ","protected":false},"excerpt":{"rendered":"<p>There are times when you feel that the default look of a submit button is just not enough for your webpage. One way to change the default look of your submit button is to use a background image. In this post, I document my attempt in using a background image for my submit button in the <strong>search this blog<\/strong> section of my blog.<\/p>\n<p><img decoding=\"async\" title=\"A snapshot of the search this blog section of my blog\" src=\"http:\/\/www.techcoil.com\/ph\/img\/blog\/posts\/blog-search-form-v1.gif\" alt=\"A snapshot of the search this blog section of my blog\" \/><\/p>\n","protected":false},"author":1,"featured_media":1185,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"footnotes":""},"categories":[375],"tags":[17,16],"jetpack_featured_media_url":"https:\/\/www.techcoil.com\/blog\/wp-content\/uploads\/CSS.gif","jetpack_shortlink":"https:\/\/wp.me\/p245TQ-1B","jetpack-related-posts":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/99"}],"collection":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media\/1185"}],"wp:attachment":[{"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techcoil.com\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}