Pyar's sliding button
This took me a while to figure out and get working right (mostly because I'm hopeless at html) so here's the source for it. I'm not going to bother making it work in IE - it's almost a lost cause.
Hello World! This is a sliding button.
There are some rendering bugs (at least there is in chrome) with the interpolation of the transparent "cap" on the end of the button when you zoom in. To move the transparent cap behind the text, move the sbcap div above sbcontent.
The 3 source images:
The html:
<div class="sbmain"> <div class="sbback"> <div class="sbhighlight"> </div> <div class="sbcontent"> Hello World! This is a sliding button. </div> <div class="sbcap"> </div> </div> </div>
The css:
.sbmain {
line-height: 32px;
}
.sbmain div {
height: 40px;
display: inline-block;
line-height: inherit;
}
.sbback {
background-image: url('sliderbutton-body.png');
background-repeat: no-repeat;
}
.sbhighlight {
float: left;
width: 0%;
margin-right: -100%;
background-image: url('sliderbutton-lit.png');
background-repeat: no-repeat;
}
.sbcap {
float: right;
width: 50px;
margin-left: -30px;
margin-right: -20px;
background-image: url('sliderbutton-cap.png');
background-repeat: no-repeat;
}
.sbcontent {
float: left;
width: 100px;
padding-left: 6px;
white-space: nowrap;
overflow: hidden;
-webkit-transition-property: width;
-webkit-transition-duration: 0.4s;
}
.sbback:hover .sbcontent {
width: 400px;
-webkit-transition-property: width;
-webkit-transition-duration: 0.4s;
}
.sbback:hover .sbhighlight {
width: 100%;
}
Tutoring
