Skip navigation
Currently Being Moderated

Using CSS3 Aqua Buttons, can't link them to my pages.

Feb 4, 2013 7:58 PM

Hello all,


If someone can please help me with this issue im having. Im trying to use these widgets buttons and create links to various pages. For some reason when I put the ex. About.html in the link section after applying it dissapears out of the link space. Check out my youtube video on what im talking about. thank you


  • Currently Being Moderated
    Feb 5, 2013 12:39 PM   in reply to ccoaston

    Answers are in your code. Can you show us a link to your page please?



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 10:20 AM   in reply to ccoaston

    A hyperlink looks like this in code view:


    <div id="aquabutton" class="button aqua">

      <div  class="glare"></div>

      <a href="index.html">HOME</a>



    Highlight the text in code view.  Go to the Link field in your Properties panel.  Browse for file.

    See screenshot:  Repeat with other links.




    Nancy O.

    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 12:41 PM   in reply to ccoaston

    Aqua buttons are not a menu system.  They are just buttons and not very good ones at that.  For best results, use a CSS styled list for menus.  Copy & paste this code into a new, blank document.  Adjust styles to suit your requirements.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="cnkglobal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    @font-face {
    font-family: 'HighlandGothicFLFRegular';
    src: url('fonts/HighlandGothicFLF.eot');
    src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');
    body {
    width: 900px;
    margin: 0 auto;
    border: 1px dotted silver;
    #navbar {
    position: relative;
    width: 100%;
    margin: 0 0 0 12px; /**adjust as needed**/
    padding: 0;
    text-align: center;
    #navbar li {
    font-family: 'HighlandGothicFLFRegular', Tahoma, Geneva, sans-serif;
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
    #navbar li a {
    display: block;
    text-decoration: none;
    border: 2px solid #666;
    margin-right: 32px; /* space between links */
    color: #FFF;
    width: 8em; /* adjust as needed or use auto */
    padding: 8px;
    font-weight: bold;
    line-height: 1.50em;
    background: #2CC7CF;
    /**rounded borders**/
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    text-shadow: 1px 2px 4px #666;
    /**top menu style on mouse over**/
     #navbar li:hover > a {
    color: #FFF;
    background: #333;
    #navbar li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0 1em;
    #navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
    #navbar li:hover li, #navbar li.hover li { float: left; }
    /* Clear floated elements at the end*/
     #navbar:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
     /**END MENU STYLE**/
    #footer {
    font-size: small;
    text-align: right;
    padding-right: 25px;
    <script type="text/xml">
    <oa:widgets> <oa:widget wid="2149023" binding="#social" /> </oa:widgets>
    <link href="jQuery/css/style.css" rel="stylesheet" type="text/css" />
    <script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
    <div id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="#">ABOUT </a></li>
    <li><a href="#">SERVICES </a></li>
    <li><a href="#">REVIEWS</a></li>
    <li><a href="#">CONTACT</a></li>
    <table style="width:795px; border: 1px solid #000; margin: 10px auto" cellpadding="5">
    <td width="212" bgcolor="#CCCCCC" class="frontpagefont">Our company was founded in 2008 and has been providing top notch computer repair service.Check out below the various services we offer for your computer needs. Listed below are the various services we offer for your computer needs. There is nothing that we can't fix. We are the one and only computer alchemist! Welcome.</td>
    <td style="width:212px; background:#CCC"><h3>We offer flat rate reliable service, windows based desktop, laptop, network setup, apple repair service and laptop loaner options and guaranteed service. CnK Technologies®, we are the computer repair alchemist! 724-759-4895</h3></td>
    <div id="footer"> <p>&copy; 2013 all rights reserved</p> </div>
    <div class="social"></div>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2149023: #social
    twitter                    :  '',
    facebook :  '',
    flickr :  '',
    delicious :  '',
    linked :  '',
    youtube :  '',
    feed :  '',
    friendfeed :  '',
    digg :  '',
    lastfm :  '',
    center : false,
    inline : true,
    small  : false,
    newPage : false
    // EndOAWidget_Instance_2149023



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Feb 8, 2013 9:31 AM   in reply to ccoaston

    If you mean the dotted line around page body, you may delete it.


    body {
    width: 900px;
    margin: 0 auto;
    border: 1px dotted silver;



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points