Quantcast
Channel: Adobe Community: Message List - Dreamweaver support forum
Viewing all articles
Browse latest Browse all 90058

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

$
0
0

/*

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

*/


Viewing all articles
Browse latest Browse all 90058

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>