Hello Bar Clone With CSS

hello-bar-clone-with-css.markdown

Hello Bar Clone With CSS

A Pen by Yamini on CodePen.

License.

index.html

<div id='bizzbar'>
  <p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p>
  <close></close>
</div>
<open></open>

script.js

/*
Bizz Bar
*/

$(document).ready(function(){$("open").click(function(){$("#bizzbar").effect("bounce","slow");$("open").slideUp()})});$(document).ready(function(){$("#bizzbar").effect("bounce","slow");$("close").click(function(){$("#bizzbar").slideUp();$("open").slideDown()})});
 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

style.css

* {
  padding:0;
  margin:0;
}

#bizzbar{  background:#eb593c;  width:100%;  text-align:center;  color:#fff;  padding:2px;  overflow:hidden;  height:30px;  z-index:1000;  font-family:Georgia;  font-size:14px;  line-height:30px;  position:fixed;  top:0;  left:0;  border-bottom:3px solid rgb(255,255,255);  box-shadow:0 1px 5px rgba(0,0,0,.7)}

#bizzbar button{-webkit-box-shadow:rgba(0,0,0,0.278431) 1px 1px 3px; background:#333;  border-bottom-left-radius:4px;  border-bottom-right-radius:4px;  border-top-left-radius:4px;  border-top-right-radius:4px;  border:none;  box-shadow:rgba(0,0,0,0.278431) 1px 1px 3px;  color:white;  cursor:pointer;  font-size:0.854em;  margin:0px 0px 0px 7px;  outline:none;  padding:2px 10px 1px;  position:relative;  text-decoration:initial}

#bizzbar button:hover{  cursor:pointer;background:#444}

#bizzbar button:active{  top:1px}

close{  width:20px;  height:19px;  bottom:6px;  right:20px;  background:url(http://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px;  position:absolute}

close:hover{  background:url(http://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px;  cursor:pointer;  height:19px}

open{-webkit-box-shadow:rgba(0,0,0,0.34902) 0px 0px 5px;background-image:url(http://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png);background-position:0px -8px;background-repeat:no-repeat no-repeat;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border:3px solid rgb(255,255,255);box-shadow:rgba(0,0,0,0.34902) 0px 0px 5px;display:block;height:0px;outline:none;overflow:hidden;padding:80px 0px 0px;position:absolute;right:10px;top:-50px;width:35px;z-index:100;background-color:#eb593c;display:none}

open:hover{ background-color:#ff5a3d; cursor:pointer}