HTML:
<div class="control save_btn">
<a href="#">Save</a>
<p class="left">Save some things</p>
</div>
CSS:
.control {
position:absolute;
z-index: 1;
}
.control a {
display: block;
height: 100px;
width: 100px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.control a, p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.left {
padding: 10px;
background: #f0ad4e;
display: block;
height: 90px;
width: 90px;
margin: -95px 0 0 0px;
/*TYPE*/
text-align: left;
font: 12px Helvetica, Verdana, sans-serif;
color: #fff;
line-height: 18px;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.save_btn a{
/*GRADIENT*/
padding:26px;
background: #337ab7; /* Old browsers */
background: -moz-linear-gradient(top, #337ab7 0%, #286090 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#337ab7), color-stop(100%,#286090)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #337ab7 0%,#286090 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #337ab7 0%,#286090 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #337ab7 0%,#286090 100%); /* IE10+ */
background: linear-gradient(top, #337ab7 0%,#286090 100%); /* W3C */
}
/*HOVER*/
.control:hover .left {
margin: -95px 0 0 -85px;
line-height: 18px;
}
/*ACTIVE*/
.save_btn a:active {
background: #337ab7; /* Old browsers */
background: -moz-linear-gradient(top, #337ab7 36%, #286090 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#337ab7), color-stop(100%,#286090)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #337ab7 36%,#286090 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #337ab7 36%,#286090 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #337ab7 36%,#286090 100%); /* IE10+ */
background: linear-gradient(top, #337ab7 36%,#286090 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}