SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    .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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    We really need to see the HTML that this goes with too. [I'll move this to the CSS forum.]

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hard to tell without html (hmm I should be a poet ).

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

    Code:
    <!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>

  4. #4
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guy, thanks for the assistance, I will take a look a pauls suggestion a bit later, but here is the html:

    Code:
    <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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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>

  6. #6
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    <!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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •