Simple CSS Button Animation

Hi everyone,

I am trying to make a “Download Now” button with a little bit of an animation to it. Basically, I have an arrow(image) that sits above the download button, I have set the css on this so that it is position:relative, and bottom: 10px. What I am trying to do is when someone hovers their cursor over the download button, the css on the image must change to bottom: 0px. So basically it creates a little animation where the arrow moves down onto the download button.

Here is my css so far:

.dlpage-download {
	float: right;
	padding: 10px 40px 0 0;
}

.dlpage-download img{
	position:relative;
	bottom: 10px;
}

.dlpage-download img:hover {
	position:relative;
	bottom: 0;
}

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:Arial Black;
	font-size:17px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:-2px 2px 1px #ffffff;
}

.myButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

.myButton:active {
	position:relative;
	top:1px;
}

This makes it so that when i hover my cursor over the image, it drops down onto the download button. Not quite what im going for, and im pretty stumped.

So if anyone has any ideas for this, I would really appreciate the input!

Im looking for a way to do this WITHOUT using javascript.

Thanks!

We really need to see the HTML that this goes with too. [I]

Hard to tell without html (hmm I should be a poet :)).

It depends on structure (and browser) but something like this works.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.dlpage-download {
    float: right;
    padding: 10px 40px 0 0;
}
.dlpage-download img {
    position:relative;
    bottom: 15px;
    -webkit-transition: position 2s ease;
    -moz-transition: position 2s ease;
    -o-transition: position 2s ease;
    transition: position 2s ease;
}
.myButton:hover + img {
    position:relative;
    bottom: -10px;
}
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:Arial Black;
    font-size:17px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:-2px 2px 1px #ffffff;
}
.myButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
.myButton:active {
    position:relative;
    top:1px;
}
</style>
</head>
<body>

<div class="dlpage-download"><p class="myButton">Button</p><img src="images/plus.gif" alt="" width="16" height="16" /></div>
</body>
</html>


Hey guy, thanks for the assistance, I will take a look a pauls suggestion a bit later, but here is the html:

<div class="dlpage-download">
 <img src="/images/down.gif" alt="">
 <p><a href="#" class="myButton">Download Now</a></p>
 (external mirror)
 </div>

Its simple, but I am using the button for my site which does get views from blackberry devices, I’m not quite sure if pauls css will work on them though, will have to give it a try. But in anycase, that’s why I opted for the simple approach, it does work and look pretty cool on a blackberry.

You’ll have to make the image come after the button in the html to sue the adjacent selector although you can still move the image into the same position that it was.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0;}
.dlpage-download {
    float: right;
    padding: 10px 40px 0 0;
    position:relative;
}
.dlpage-download img {
    position:absolute;
    left:-17px;
    top:5px;
    -webkit-transition: position 2s ease;
    -moz-transition: position 2s ease;
    -o-transition: position 2s ease;
    transition: position 2s ease;
}
.myButton:hover + img {
    top:30px;
}
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:Arial Black;
    font-size:17px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:-2px 2px 1px #ffffff;
}
.myButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
.myButton:active {
    position:relative;
    top:1px;
}
</style>
</head>
<body>
<div class="dlpage-download">
    <p><a href="#" class="myButton">Download Now</a><img src="/images/down.gif" alt=""></p>
    (external mirror) </div>
</body>
</html>


O my word! Thanks so much for that, it works wonders, and looks the same no matter what i view it through :slight_smile: