HTML5 Tutorial – 24 – Making Awesome Rollover Buttons

[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –


Posted

in

by

Tags:

Comments

24 responses to “HTML5 Tutorial – 24 – Making Awesome Rollover Buttons”

  1. n00bSlayer Avatar

    I'm a caveman, and I have successfully done this.

  2. tornike makaridze Avatar

    Caveman!!!!!!!!!!!!!!!

  3. Jonny M Avatar

    when you memorize the wix advertisement.

  4. patricia muli Avatar

    this was so much fun.

  5. Swapnil Sonsurkar Avatar

    this was really awsome

  6. Jason Zimmerman Avatar

    :—        :—————- I'm excited!!!   To try out these techniques. lol

  7. Andrew Krause Avatar

    I'm offended. I'm a caveman,

  8. Nathan P Avatar

    Hey, nice tutorial. I was just wondering if there was a way to keep the box animated after rolling off.

  9. The Voyage Avatar

    Hi! Thanx for the tutorial, I did a very basic change, just wanted background and color to change… See code below… Do you need Bootstrap or something else??

    #box {
    display:block;
    position:absolute;
    bottom:0;
    width:300px;
    height:60px;
    color:#000000;
    background:#001951;
    -webkit-transition:-webikit-transform 2s, background 2s, color 2s;
    }

    #box:hover {
    -webkit-transform: 
    background:#000000;
    color:#001951;
    }

  10. aystacy Avatar

    Love this! Works great! Thanks for sharing!

  11. JBaash Avatar

    Can someone please help me, I put in the correct code but the button won't rotate. Is there a new way to do this?

  12. Aashish Kandel Avatar

    this is freaking cool!!!!!!!!!!

  13. JunMo Gu Avatar

    oh my gosh, this is really awesome!!

  14. Hi Def Avatar

    I was able to do everthing else except make it turn around 360 degrees. can someone help me out>?

  15. Cthulhoo X Avatar

    'so easy, even a caveman can do it'

  16. Law Viktor Avatar

    my little button runs to left up corner after first delete …. how can i get it back to center~? Thank you~~

  17. Willow Lawson Avatar

    My code doesn't work…help!

    #box {
    display:block;
    margin:150px auto;/Moves it down 150px and center:/

    color:#ffffff;
    /Make rounded corners:/
    -webkit-border-radius:10px;
    /Set original properties:/
    opacity:0.6;
    background:red;
    width:120px;
    height:75px;
    /*Specify each property we want to animate, and how long we want the 
    animation to take:*/
    -webkit-transition-duration:-webkit-transform 2s, opacity 2s, background 2s,
    width 2s  height 2s;

    }

    /Here is what you want it to look like on hover/
    #box:hover{
    -webkit-transform:rotate(180deg);
    opacity:1;
    background:#1ec7e6;
    width:450px;
    height:110px;
    }

  18. Gilbert Bigelow Avatar

    Bucky called javascript and php crap.

  19. g0ds0n123 Avatar

    I am using the latest version of Chrome, and I am having trouble getting this animation to work, So is there a flaw in my code or does this code just not work any more, please help !

  20. Boa Hancock Avatar

    whats "display:block;" used? I tried to delete it and nothing changed

  21. Kosteri x Avatar

    a very smart caveman perhaps.

  22. Kosteri x Avatar

    its 2014 and IE 11 and FF 29 do not work like chrome.

Leave a Reply

Your email address will not be published. Required fields are marked *