With help of an online tool I generated code for a button and its hover effect. The hyper-ref of the embedded buttom should lead to the "Contact" page of the same google-site, but I don't know where to find the actual URL.The google-site has not been published yet, so I'm sure all URLs showing in the navigation bar during the site's edition are provisional. Google-sites offers an option to add links to images or text, leading the the same site, but I can't see what the actuall URLs look like.
For reference, I pasted the code of the button. I think I only need to change the first line (i.e. the hash symbol in href="#" ) to fix the problem. I'm a complete begginer to web programming. Any suggestions?
<a href="#" class="myButton">Contact Us for Your Solution</a>
<style>.myButton {
-moz-box-shadow: 3px 3px 1px 0px #878787;
-webkit-box-shadow: 3px 3px 1px 0px #878787;
box-shadow: 3px 3px 1px 0px #878787;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
background-color:#ffffff;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
padding:6px 8px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
background-color:#f6f6f6;
}
.myButton:active {
position:relative;
top:1px;
}</style>
Considering the page you want to link to is on the same domain, you can simply use a relative link:
<a href="contact" class="myButton">Contact Us for Your Solution</a>
If the page is up one or more folders in the directory structure, prepend ../
:
<a href="../contact" class="myButton">Contact Us for Your Solution</a>
If the page is at the root of the website (http://www.example.com/contact
), you could use an absolute link by prepending a slash:
<a href="/contact" class="myButton">Contact Us for Your Solution</a>