Advanced Search

Fading Google Button Box

/ Published in: CSS
Save to your folder(s)
Simple Demonstration For a Fading Button Box..

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML :
  2.  
  3. <div class="holder">
  4.   <a target="_blank" href="https://plus.google.com/113096484888668600653/posts">
  5. 	  <div class="h1"></div>
  6.   	<div class="h2"></div>
  7.   	<div class="h3"></div>
  8.   </a>
  9. </div>
  10.  
  11.  
  12. CSS:
  13.  
  14. .holder {
  15.    position: relative;
  16.    width: 215px;
  17.    height: 215px;
  18.    margin: 20px;
  19.    z-index: 999a;
  20.    cursor: pointer;
  21. }
  22. .h1 {
  23.    background: url(http://picbox.im/image/209a643d3d-1.png);
  24.    width: 210px;
  25.    height: 86px;
  26.    position: absolute;
  27.    z-index:10;
  28. }
  29. .h2 {
  30.    background: url(http://picbox.im/image/29ce86daf0-g.png);
  31.    width: 181px;
  32.    height: 92px;
  33.    position: absolute;
  34.    z-index: 20;
  35.    top: 90px;
  36.    left: 14px;
  37.     -webkit-transition: all 1s ease-in-out;
  38.     -moz-transition: all 1s ease-in-out;
  39.     -o-transition: all 1s ease-in-out;
  40.     -ms-transition: all 1s ease-in-out;
  41.     transition: all 1s ease-in-out;
  42. }
  43. .h3 {
  44.    background: url(http://picbox.im/image/87659c6f06-2.png);
  45.    width: 210px;
  46.    height: 174px;
  47.    position: absolute;
  48.    z-index:30;
  49.    top: 37px;
  50. }
  51. .holder:hover .h2 {
  52.     top: -5px;
  53. }

URL: http://www.megawrz.com/css/184564-fading-google-button-box.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.