javascriptjqueryhtmlcssgoogle-sites-2016

How to add embedded buttons to new Google-Sites [2018], linked to the same site pages?


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>

Solution

  • 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>