{"id":292,"date":"2015-10-09T08:24:56","date_gmt":"2015-10-09T08:24:56","guid":{"rendered":"http:\/\/angelwings.net\/blog\/?p=292"},"modified":"2015-10-09T08:24:56","modified_gmt":"2015-10-09T08:24:56","slug":"htmlcss-styling-form-buttons","status":"publish","type":"post","link":"https:\/\/angelwings.net\/blog\/htmlcss-styling-form-buttons\/","title":{"rendered":"HTML\/CSS: Styling form buttons"},"content":{"rendered":"<p>source: http:\/\/jsfiddle.net\/2RYyD\/<\/p>\n<p>Great example there but if you&#8217;re styling the button which is a <strong>form submit button<\/strong>, remember to change the button type to &#8220;<strong>submit<\/strong>&#8221; instead or the variables won&#8217;t get posted.<\/p>\n<p>&lt;div class=&#8221;button&#8221;&gt;<br \/>\n&lt;input type=&#8221;button&#8221; value=&#8221;TELL ME MORE&#8221; onClick=&#8221;document.location.reload(true)&#8221;&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>.button input[type=&#8221;button&#8221;]{<br \/>\ncolor:#08233e;<br \/>\nfont:2.4em Futura, \u2018Century Gothic\u2019, AppleGothic, sans-serif;<br \/>\nfont-size:70%;<br \/>\npadding:14px;<br \/>\nbackground:url(overlay.png) repeat-x center #ffcc00;<br \/>\nbackground-color:rgba(255,204,0,1);<br \/>\nborder:1px solid #ffcc00;<br \/>\n-moz-border-radius:10px;<br \/>\n-webkit-border-radius:10px;<br \/>\nborder-radius:10px;<br \/>\nborder-bottom:1px solid #9f9f9f;<br \/>\n-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);<br \/>\n-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);<br \/>\nbox-shadow:inset 0 1px 0 rgba(255,255,255,0.5);<br \/>\ncursor:pointer;<br \/>\ndisplay:block;<br \/>\nwidth:100%;<br \/>\n}<\/p>\n<p>.button input[type=&#8221;button&#8221;]:hover{background-color:rgba(255,204,0,0.8);}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>source: http:\/\/jsfiddle.net\/2RYyD\/ Great example there but if you&#8217;re styling the button which is a form submit button, remember to change the button type to &#8220;submit&#8221; instead or the variables won&#8217;t get posted. &lt;div class=&#8221;button&#8221;&gt; &lt;input type=&#8221;button&#8221; value=&#8221;TELL ME MORE&#8221; onClick=&#8221;document.location.reload(true)&#8221;&gt; &lt;\/div&gt; .button input[type=&#8221;button&#8221;]{ color:#08233e; font:2.4em Futura, \u2018Century Gothic\u2019, AppleGothic, sans-serif; font-size:70%; padding:14px; background:url(overlay.png) repeat-x center [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[53,71],"class_list":["post-292","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts\/292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/comments?post=292"}],"version-history":[{"count":0,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts\/292\/revisions"}],"wp:attachment":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/media?parent=292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/categories?post=292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/tags?post=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}