{"id":13495,"date":"2011-12-26T07:20:15","date_gmt":"2011-12-26T12:20:15","guid":{"rendered":"http:\/\/info.template-help.com\/?p=13495"},"modified":"2016-02-25T04:59:24","modified_gmt":"2016-02-25T09:59:24","slug":"htmlcss-styling-active-button-condition","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/htmlcss-styling-active-button-condition.html","title":{"rendered":"HTML\/CSS. Styling active button condition"},"content":{"rendered":"<p>\r\n<p>This tutorial shows how to create a new button in HTML and its style in CSS file.<\/p>\r\n<p><!--more--><\/p>\r\n<p>  1) First you need to add a button in HTML file. The easiest way to do that is to use a basic &lt;a&gt; tag. Like in the following coding:<\/p>\r\n<pre>&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Button_text_here&lt;\/a&gt;<\/pre>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/12\/screenshot1.png\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/12\/screenshot1-300x106.png\" alt=\"\" width=\"300\" height=\"106\" class=\"aligncenter size-medium wp-image-13496\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot1-300x106.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot1-1024x364.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot1.png 1259w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>  2) Create the style for the button in style.css file: select the background color, width and padding. For example:<\/p>\r\n<pre>  .button1 {background:#000000;padding:5px;}<\/pre>\r\n<p>  3) The style for the button on hover is created in the same way. You should create the css class &quot;.button_name:hover&quot;: <\/p>\r\n<pre>  .button1:hover {background:#FF0000; padding:5px;}<\/pre>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/12\/screenshot2.png\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/12\/screenshot2-300x101.png\" alt=\"\" width=\"300\" height=\"101\" class=\"aligncenter size-medium wp-image-13497\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot2-300x101.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot2-1024x347.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/12\/screenshot2.png 1262w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>  4) Save the changes in HTML and CSS files and open index.HTML file to preview the changes on the site.<\/p>\r\n<p><a href=\"\/help\/files\/css\/CCS-styling-active-button-condition.htm\" target=\"blank\">how to change Google Map location in WordPress<\/a> <\/p>\r\n<p><!--more--> <\/p>\r\n<p><!--more--><\/p>\r\n<p><!--more--><br \/>\r\n<\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to create a new button in HTML and its style in CSS file.<\/p>\n","protected":false},"author":33,"featured_media":13498,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256,253],"tags":[1124,536,514,1123,2411],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13495"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=13495"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/13495\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/13498"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=13495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=13495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=13495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}