Cacher is the code snippet organizer for pro developers

http://jsfiddle.net/nAaMV/6/

<div class="hide-mobile" id="button-top">
	<button class="contact-button-link show-hide-contact-bar"><span class="fa fa-angle-left"></span></button>
</div>
<div class="slide innerTop">
	<div class="cta_orange">
	<a target="_blank" href="http://google.com"><img src="http://popbetaserver.com/projects/casal/wp-content/uploads/2015/05/people.png">CLIENT LOGIN</a>
	</div>
	<div class="cta_gray">
	<a href="#cta-email"><img src="http://popbetaserver.com/projects/casal/wp-content/uploads/2015/05/comment.png">EMAIL</a>
	</div>
	<div class="cta_orange">
	<a href="#contact"><img src="http://popbetaserver.com/projects/casal/wp-content/uploads/2015/05/share1.png">SHARE</a>
	</div>
</div>

REF:
http://jsfiddle.net/nAaMV/6/


.slide { position: relative; height: auto; overflow: hidden; width: 350px; }

.slide img {position: relative; z-index: 100;}


.innerTop, .innerBottom { position: absolute; left: 200px; top: 10px; width: 200px; height: auto; padding: 6px; z-index: -1;     margin-top: 35px; }

.contact-button-link {
	display: block;
    width: 50px;
    height: 50px;
    padding: 0;
    margin-bottom: 1px;
    text-align: center;
    line-height: 50px;
    border: #676C6F;
    font-size: 22px;
    background: #676C6F;
    color: #fff;
    position: relative;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    transition: all 250ms;
}

jQuery.noConflict();


jQuery(document).ready(function() {

	// adjust left pixels according to content width
jQuery('#button-top').toggle(function() {
  jQuery('.innerTop').animate({'left':'-105px'});
}, function() {
 jQuery('.innerTop').animate({'left':'103px'});
});
	
	
	
});