{"id":8170,"date":"2013-02-15T07:46:49","date_gmt":"2013-02-15T07:46:49","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=8170"},"modified":"2013-02-15T07:51:54","modified_gmt":"2013-02-15T07:51:54","slug":"use-form-button-as-link","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/use-form-button-as-link\/affordablewebsitestips\/tutorials","title":{"rendered":"Use form button as link"},"content":{"rendered":"<p>Sometimes it's better to create a button on your website instead of a link. Creating a button using Photoshop, or JavaScript can be a slight hassle. In this tutorial, I will show you how to create a button link, using the form button html element Using a form button in place of a link is very easy and quick to do. Your website's CSS styles will probably make the button link match the rest of the site, which is what we want.<\/p>\n<h3>Create form button link<\/h3>\n<ol>\n<li>Copy the code snippet below and paste it into your website's HTML. If you have a WordPress website, you can paste this cose snippet into any post, page or widget.\n<p><!--DEVFMTCODE--><pre class=\"devcodeblock\" title=\"HTML\"><table class=\"devcodetools\"><tbody><tr><td>&nbsp;HTML&nbsp;|&nbsp;<\/td><td style=\"background-image:url('https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/img\/devformatter-copy.png');background-repeat:no-repeat;background-position:50% 50%;width:16px;height:16px;\"\/><embed id=\"ZeroClipboard1\" src=\"https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/_zclipboard.swf\" loop=\"false\" menu=\"false\" quality=\"best\" bgcolor=\"#ffffff\" width=\"16px\" height=\"16px\" align=\"middle\" allowScriptAccess=\"always\" allowFullScreen=\"false\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" flashvars=\"id=1&width=16&height=16\" wmode=\"transparent\" \/><\/td><td>&nbsp;copy&nbsp;code&nbsp;|<\/td><td style=\"cursor:pointer\" title=\"DevFormatter Plugin\" onclick=\"devfmt_credits()\">?<\/td><td width=\"99%\">&nbsp;<\/td><\/tr><\/tbody><\/table><div class=\"devcodeoverflow\"><table class=\"devcodearea\" width=\"100%\"><tr><td class=\"devcodelines\" width=\"1%\">1<\/td><td class=\"devcodelinesarea\"><pre class=\"devcode devcodeline\"><span style=\"color: #009900;\">&lt;<span style=\"color: #000000; font-weight: bold;\">input<\/span> <span style=\"color: #000066;\">type<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #ff0000;\">&quot;button&quot;<\/span> <span style=\"color: #000066;\">value<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #ff0000;\">&quot;Continue&quot;<\/span> <\/span><\/pre><\/td><\/tr><tr><td class=\"devcodelines devcodelinesodd devcodelinesodd\" width=\"1%\">2<\/td><td class=\"devcodelinesarea devcodelinesareaodd devcodelinesareaodd\"><pre class=\"devcode devcodeline\"><span style=\"color: #009900;\"><span style=\"color: #000066;\">onClick<\/span><span style=\"color: #66cc66;\">=<\/span><span style=\"color: #ff0000;\">&quot;window.location.href='http:\/\/google.com';&quot;<\/span> <span style=\"color: #66cc66;\">\/<\/span>&gt;<\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre><!--END_DEVFMTCODE--><\/li>\n<li>Change the Google website address to be the link for your button.<\/li>\n<li>Customize the text for the button by changing the text 'Continue'.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes it&#8217;s better to create a button on your website instead of a link. Creating a button using Photoshop, or JavaScript can be a slight hassle. In this tutorial, I will show you how to create a button link, using the form button html element Using a form button in place of a link is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,492,6],"tags":[659,402,168],"class_list":["post-8170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-websites-2","category-wordpress","tag-button","tag-html","tag-link"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=8170"}],"version-history":[{"count":4,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8170\/revisions"}],"predecessor-version":[{"id":8174,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/8170\/revisions\/8174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/7541"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=8170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=8170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=8170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}