Creating a Simple Button for Demo

This is the result:



And the code for this is:
For CSS Mark-Up, Paste is before ]]></b:skin>

a.demo{
  background:skyblue;
  padding:5px 20px 5px 20px;
  text-align:center;
  font-family: Arial;
  font-size:18px;
  border:#e1e1e1 1px solid;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
  color:#e1e1e1;
}
a:link.demo,a:visited.demo{
  text-decoration:none;
  }
a:active.demo {text-decoration: none;color:gray;padding:4px 20px 4px 20px;}
a:hover.demo {text-decoration: none;box-shadow:none; }
and this is how we use it.
For HTML Mark-Up 
<a class="demo" href="LINK OF THE PAGE HERE" title="see it live">Live Demo</a>
Every time we use this button just define the link by putting "class="demo"" just like the above example.
You can customize the background, font and color on the "a.demo"

Comments

Popular posts from this blog

Creating heat map using GeoDjango

Setting Up 404 Page Not Found in Blogger

Publish PostGIS Layers in GeoServer Automatically using cURL and REST