Hover Widget

From "AllBloggingTips.com"

by Chris Vitalos

HTML

<html>

  <head>

  <body>
    <div id='ut-sticky'>
      <p style='padding-top:0px;'>This is a <a href='https://allbloggingtips.com'><button>Test</button></a></p>
      <!-- <div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div> -->
    </div>
    <script language='JavaScript'>
      function hide_cross() {
        crosstbox = document.getElementById( & quot; ut - sticky & quot;);
        crosstbox.style.visibility = & #39;hidden&# 39;;
      }

    </script>
    <br /><br />
    <br /><br />
  </body>
  </head>

</html>

CSS

#ut-sticky {
  background: #7d7e7d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(6%, #7d7e7d), color-stop(9%, #7d7e7d), color-stop(99%, #0e0e0e));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%);
  /* IE10+ */
  background: linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39; #7d7e7d&#39; , endColorstr=&#39; #0e0e0e&#39; , GradientType=0);
  /* IE6-9 */

  border-bottom: 2px solid #999;

  margin-left: -10px;
  color: #fff;
  text-align: center;
  
  padding-bottom: 1px;
  border: 1px solid #333;
  height: 48px;
  font-size: 13px;
  position: fixed;
  vertical-align: baseline;
  overflow: hidden;
  z-index: 999;
  width: 100%;
  border-radius: 6px;
  display: block;
  font-weight: bold;
  font-family: arial, verdana;
  -moz-box-shadow: 0 2px 4px hsla(0, 0%, 0%, .35);
  -webkit-box-shadow: 0 2px 4px hsla(0, 0%, 0%, .35);
}

#ut-sticky:hover {

  background-color: #333;
  background-image: -moz-linear-gradient(top, #555555, #434343);
  background-image: -ms-linear-gradient(top, #555555, #434343);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#434343));
  background-image: -webkit-linear-gradient(top, #555555, #434343);
  background-image: -o-linear-gradient(top, #555555, #434343);
  background-image: linear-gradient(top, #555555, #434343);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39; #555555&#39; , endColorstr=&#39; #434343&#39; , GradientType=0) -webkit-transition:all 1.3s ease-in-out;
 ...