9 Replies Latest reply: Feb 8, 2013 9:31 AM by Nancy O. RSS

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

    ccoaston

      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

      e

        • 1. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
          Nancy O. MVP

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

           

           

          Nancy O.

          • 2. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
            ccoaston Community Member

            /*

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

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

            /* BeginOAWidget_Instance_2512022: #aquabutton */

             

             

             

                      @font-face {

                                font-family: 'HighlandGothicFLFRegular';

                                src: url('fonts/HighlandGothicFLF.eot');

                                src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');

                      }

             

            #aquabutton.button{

                      width: 75px;

                      height: 30px;

                      padding: 5px 16px 3px;

                      -webkit-border-radius: 20px;

                      -moz-border-radius: 20px;

                      border: 1px solid #ccc;

                      position: absolute;

                      /* Label */

              /* Label */

                      font-family: HighlandGothicFLFRegular, Helvetica, sans-serif;

                      font-size: 12px;

                      color: #fff;

                      font-color: #ababab;

                      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

                      text-align: center;

                      vertical-align: center;

                      white-space: nowrap;

                      text-overflow: ellipsis;

                      overflow: hidden;

                      left: 401px;

                      top: 18px;

            }

            #aquabutton.aqua{

              background-color: rgba(60, 132, 198, 0.8);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#990000), to(#999999));

              border-top-color: #990000;

              border-right-color: #999999;

              border-left-color: #999999;

              border-bottom-color: #999999;

              -webkit-box-shadow:  #000000 0px 10px 16px;

              -moz-box-shadow: #000000 0px 10px 16px; /* FF 3.5+ */

            }

            #aquabutton .button .glare {

              position: absolute;

              padding: 8px 0;

            }

            #aquabutton.button .glare {

                      position: absolute;

                      align: center;

                      -webkit-border-radius: 8px;

                      -moz-border-radius: 8px;

                      height: 20px;

                      width: 75px;

                      background-color: rgba(255, 255, 255, 0.25);

                      background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

                      left: 17px;

                      top: 5px;

            }

             

             

            #aquabutton.button:hover {

                                          text-shadow: rgb(255, 255, 255) 0px 0px 5px;

                                }

             

             

             

            /* EndOAWidget_Instance_2512022 */

            </style>

            <script type="text/xml">

            <!--

            <oa:widgets>

              <oa:widget wid="2512022" binding="#aquabutton" />

              <oa:widget wid="2512022" binding="#aquabutton_2" />

              <oa:widget wid="2512022" binding="#aquabutton_3" />

              <oa:widget wid="2512022" binding="#aquabutton_4" />

              <oa:widget wid="2512022" binding="#aquabutton_5" />

              <oa:widget wid="2149023" binding="#social" />

            </oa:widgets>

            -->

            </script>

            <style type="text/css">

            /* BeginOAWidget_Instance_2512022: #aquabutton_2 */

             

             

             

                      @font-face {

                                font-family: 'HighlandGothicFLFRegular';

                                src: url('fonts/HighlandGothicFLF.eot');

                                src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');

                      }

             

            #aquabutton_2.button{

                      width: 75px;

                      height: 30px;

                      padding: 5px 16px 3px;

                      -webkit-border-radius: 20px;

                      -moz-border-radius: 20px;

                      border: 1px solid #ccc;

                      position: absolute;

                      /* Label */

              /* Label */

                      font-family: HighlandGothicFLFRegular, Helvetica, sans-serif;

                      font-size: 12px;

                      color: #fff;

                      font-color: #ababab;

                      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

                      text-align: center;

                      vertical-align: center;

                      white-space: nowrap;

                      text-overflow: ellipsis;

                      overflow: hidden;

                      left: 520px;

                      top: 18px;

            }

            #aquabutton_2.aqua{

              background-color: rgba(60, 132, 198, 0.8);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#990000), to(#999999));

              border-top-color: #990000;

              border-right-color: #999999;

              border-left-color: #999999;

              border-bottom-color: #999999;

              -webkit-box-shadow:  #000000 0px 10px 16px;

              -moz-box-shadow: #000000 0px 10px 16px; /* FF 3.5+ */

            }

            #aquabutton_2 .button .glare {

              position: absolute;

              padding: 8px 0;

            }

            #aquabutton_2.button .glare {

                      position: absolute;

                      align: center;

                      -webkit-border-radius: 8px;

                      -moz-border-radius: 8px;

                      height: 20px;

                      width: 75px;

                      background-color: rgba(255, 255, 255, 0.25);

                      background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

                      left: 18px;

            }

             

             

            #aquabutton_2.button:hover {

                                          text-shadow: rgb(255, 255, 255) 0px 0px 5px;

                                }

             

             

             

            /* EndOAWidget_Instance_2512022 */

            </style>

            <style type="text/css">

            /* BeginOAWidget_Instance_2512022: #aquabutton_3 */

             

             

             

                      @font-face {

                                font-family: 'HighlandGothicFLFRegular';

                                src: url('fonts/HighlandGothicFLF.eot');

                                src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');

                      }

             

            #aquabutton_3.button{

                      width: 80px;

                      height: 30px;

                      padding: 5px 16px 3px;

                      -webkit-border-radius: 20px;

                      -moz-border-radius: 20px;

                      border: 1px solid #ccc;

                      position: absolute;

                      /* Label */

              /* Label */

                      font-family: HighlandGothicFLFRegular, Helvetica, sans-serif;

                      font-size: 12px;

                      color: #fff;

                      font-color: #ababab;

                      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

                      text-align: center;

                      vertical-align: center;

                      white-space: nowrap;

                      text-overflow: ellipsis;

                      overflow: hidden;

                      left: 636px;

                      top: 19px;

            }

            #aquabutton_3.aqua{

              background-color: rgba(60, 132, 198, 0.8);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#990000), to(#999999));

              border-top-color: #990000;

              border-right-color: #999999;

              border-left-color: #999999;

              border-bottom-color: #999999;

              -webkit-box-shadow:  #000000 0px 10px 16px;

              -moz-box-shadow: #000000 0px 10px 16px; /* FF 3.5+ */

            }

            #aquabutton_3 .button .glare {

              position: absolute;

              padding: 8px 0;

            }

            #aquabutton_3.button .glare {

              position: absolute;

              align:center;

              -webkit-border-radius: 8px;

              -moz-border-radius: 8px;

              height: 20px;

              width: 80px;

              background-color: rgba(255, 255, 255, 0.25);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

            }

             

             

            #aquabutton_3.button:hover {

                                          text-shadow: rgb(255, 255, 255) 0px 0px 5px;

                                }

             

             

             

            /* EndOAWidget_Instance_2512022 */

            </style>

            <style type="text/css">

            /* BeginOAWidget_Instance_2512022: #aquabutton_4 */

             

             

             

                      @font-face {

                                font-family: 'HighlandGothicFLFRegular';

                                src: url('fonts/HighlandGothicFLF.eot');

                                src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');

                      }

             

            #aquabutton_4.button{

                      width: 80px;

                      height: 30px;

                      padding: 5px 16px 3px;

                      -webkit-border-radius: 20px;

                      -moz-border-radius: 20px;

                      border: 1px solid #ccc;

                      position: absolute;

                      /* Label */

              /* Label */

                      font-family: HighlandGothicFLFRegular, Helvetica, sans-serif;

                      font-size: 12px;

                      color: #fff;

                      font-color: #ababab;

                      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

                      text-align: center;

                      vertical-align: center;

                      white-space: nowrap;

                      text-overflow: ellipsis;

                      overflow: hidden;

                      left: 757px;

                      top: 19px;

            }

            #aquabutton_4.aqua{

              background-color: rgba(60, 132, 198, 0.8);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#990000), to(#999999));

              border-top-color: #990000;

              border-right-color: #999999;

              border-left-color: #999999;

              border-bottom-color: #999999;

              -webkit-box-shadow:  #000000 0px 10px 16px;

              -moz-box-shadow: #000000 0px 10px 16px; /* FF 3.5+ */

            }

            #aquabutton_4 .button .glare {

              position: absolute;

              padding: 8px 0;

            }

            #aquabutton_4.button .glare {

              position: absolute;

              align:center;

              -webkit-border-radius: 8px;

              -moz-border-radius: 8px;

              height: 20px;

              width: 80px;

              background-color: rgba(255, 255, 255, 0.25);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

            }

             

             

            #aquabutton_4.button:hover {

                                          text-shadow: rgb(255, 255, 255) 0px 0px 5px;

                                }

             

             

             

            /* EndOAWidget_Instance_2512022 */

            </style>

            <style type="text/css">

            /* BeginOAWidget_Instance_2512022: #aquabutton_5 */

             

             

             

                      @font-face {

                                font-family: 'HighlandGothicFLFRegular';

                                src: url('fonts/HighlandGothicFLF.eot');

                                src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');

                      }

             

            #aquabutton_5.button{

                      width: 80px;

                      height: 30px;

                      padding: 5px 16px 3px;

                      -webkit-border-radius: 20px;

                      -moz-border-radius: 20px;

                      border: 1px solid #ccc;

                      position: absolute;

                      /* Label */

              /* Label */

                      font-family: HighlandGothicFLFRegular, Helvetica, sans-serif;

                      font-size: 12px;

                      color: #fff;

                      font-color: #ababab;

                      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;

                      text-align: center;

                      vertical-align: center;

                      white-space: nowrap;

                      text-overflow: ellipsis;

                      overflow: hidden;

                      left: 877px;

                      top: 20px;

            }

            #aquabutton_5.aqua{

              background-color: rgba(60, 132, 198, 0.8);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#990000), to(#999999));

              border-top-color: #990000;

              border-right-color: #999999;

              border-left-color: #999999;

              border-bottom-color: #999999;

              -webkit-box-shadow:  #000000 0px 10px 16px;

              -moz-box-shadow: #000000 0px 10px 16px; /* FF 3.5+ */

            }

            #aquabutton_5 .button .glare {

              position: absolute;

              padding: 8px 0;

            }

            #aquabutton_5.button .glare {

              position: absolute;

              align:center;

              -webkit-border-radius: 8px;

              -moz-border-radius: 8px;

              height: 20px;

              width: 80px;

              background-color: rgba(255, 255, 255, 0.25);

              background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));

            }

             

             

            #aquabutton_5.button:hover {

                                          text-shadow: rgb(255, 255, 255) 0px 0px 5px;

                                }

             

             

             

            /* EndOAWidget_Instance_2512022 */

            </style>

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

            </head>

             

             

            <body>

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

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

              HOME </div>

            <h1 align="center"> </h1>

            <h1 align="center"><img src="RedBlock.PNG" width="941" height="366" /></h1>

            <p align="center"><img src="ServicesImage.PNG" width="941" height="151" usemap="#Map" border="0" />

              <map name="Map" id="Map">

                <area shape="rect" coords="58,55,141,85" href="Services.html" target="_self" alt="Services" />

              </map>

            </p>

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

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

            ABOUT </div>

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

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

              SERVICES </div>

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

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

            REVIEWS </div>

             

             

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

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

              CONTACT </div>

            <table width="795" height="281" border="1" align="center">

              <tr>

                <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 width="212" bgcolor="#CCCCCC"><h3 align="justify">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>

              </tr>

            </table>

            <div class="social"></div>

            <script type="text/javascript">

            // BeginOAWidget_Instance_2149023: #social

             

                      $('.social').jsocial({

                                          twitter                    :  '',

                                          facebook          :  'facebook.com/CnkTechnologies',

                                          flickr                    :  '',

                                          delicious          :  '',

                                          linked                    :  '',

                                          youtube                    :  'youtube.com/ccoaston2008',

                                          feed                    :  '',

                                          friendfeed          :  '',

                                          digg                    :  '',

                                          lastfm                    :  '',

                                          center                    : false,

                                          inline                    : true,

                                          small                    : false,

                                          newPage                    : false

                                });

             

             

             

            // EndOAWidget_Instance_2149023

            </script>

            <p> </p>

            </body>

            </html>

            */

            • 3. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
              ccoaston Community Member

              where do i insert so i can link my buttons to diffrent pages

              • 4. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                ccoaston Community Member

                really no one knows?

                • 5. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                  Nancy O. MVP

                  A hyperlink looks like this in code view:

                   

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

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

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

                  </div>

                   

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

                  See screenshot:  Repeat with other links.

                  CS6Link-properties.jpg

                   

                   

                  Nancy O.

                  • 6. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                    ccoaston Community Member

                    nothing happens when i pick the file to poitn it to. the text dissapears when a sec after

                    • 7. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                      Nancy O. MVP

                      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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      <head>
                      <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;
                      }
                      </style>
                      <script type="text/xml">
                      <!--
                      <oa:widgets> <oa:widget wid="2149023" binding="#social" /> </oa:widgets>
                      -->
                      </script>
                      <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>
                      </head>
                      
                      <body>
                      
                      <div id="navbar">
                      <ul>
                      <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>
                      </ul>
                      </div>
                      
                      <table style="width:795px; border: 1px solid #000; margin: 10px auto" cellpadding="5">
                      <tr>
                      <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>
                      </tr>
                      </table>
                      
                      <div id="footer"> <p>&copy; 2013 all rights reserved</p> </div>
                      
                      <div class="social"></div>
                      <script type="text/javascript">
                      
                      // BeginOAWidget_Instance_2149023: #social
                      $('.social').jsocial({
                      twitter                    :  '',
                      facebook :  'facebook.com/CnkTechnologies',
                      flickr :  '',
                      delicious :  '',
                      linked :  '',
                      youtube :  'youtube.com/ccoaston2008',
                      feed :  '',
                      friendfeed :  '',
                      digg :  '',
                      lastfm :  '',
                      center : false,
                      inline : true,
                      small  : false,
                      newPage : false
                      });
                      // EndOAWidget_Instance_2149023
                      </script>
                      </body>
                      </html>
                      

                       

                       

                      Nancy O.

                      • 8. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                        ccoaston Community Member

                        thank you so much. Quick question. What is this line in my website, http://www.cnktech.net/CnKTech_final/index.html

                        • 9. Re: Using CSS3 Aqua Buttons, can't link them to my pages.
                          Nancy O. MVP

                          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.