www.webdeveloper.com
Results 1 to 6 of 6

Thread: button hover effect with animation

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    38

    Question button hover effect with animation

    Hey guys,

    so for the past couple of days I've been looking into the css animation and different (more complex) hover effects.

    I am trying to use it on a very simple effect though - as I hover over a social icon the colored version would rise-up from the bottom.

    But I am stuck. I tried anything, but without success.
    Here's the code:

    HTML Code:
    <ul id='followus'>
         <li id='follow'><a href='#'>follow us</a></li>
         <li id='fb'><a href='http://www.facebook.com'><p></p></a></li>
         <li id='twitter'><a href='http://www.twitter.com'><p></p></a></li>
    </ul>
    Code:
    #fb p{
    	background: url('../images/social.png') 0px 31px;
    	width: 32px;
    	height: 31px;
    }
    
    #fb p:hover{
    	-webkit-animation: myfirst 1s;
    		border: 1px solid red;
    }
    
    @keyframes myfirst
    {
    0%   {top:20px;}
    100% {top:50px;}
    }
    I am using an image sprite which includes both the grey and colored version.

    Can you give me some tips on how to get my animation going?

  2. #2
    Join Date
    Oct 2013
    Posts
    38
    Nobody? I expected at elast someone would know something about css animations

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    CSS3 would cover animation. Also, you could look into using HTML5's Canvas.

    Other sources for CSS3 Animation.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there McCloud,

    check out the attachment to see a possible solution.


    coothead
    Attached Files Attached Files

  5. #5
    Join Date
    Oct 2013
    Posts
    38
    Greeat. Thanks a lot coothead.

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459

    No problem, you're very welcome.

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles