Grow your CSS skills. Land your dream job.

YouTube Popup Buttons

Published by Chris Coyier

There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked.


Default state


:hover / :focus state


:active state

I think this design works well in the context of YouTube's footer. 1) The default state is very subdued, meaning these buttons aren't competing for attention on a site where almost everything else is. 2) You still get the very rich/obvious experience of pushing a button 3) They imply a different functionality than the other links in the footer (press these, and something will happen, press a link, be taken away to another page). They make good on that implication as well, each of those buttons opens up a panel of settings right beneath.

Here's a remake of them. Start with a button:

<button class="button" role="button">
   Button #1
</button>

And the base styles including all three states:

.button {
   border: 1px solid #DDD;
   border-radius: 3px;
   text-shadow: 0 1px 1px white;
   -webkit-box-shadow: 0 1px 1px #fff;
   -moz-box-shadow:    0 1px 1px #fff;
   box-shadow:         0 1px 1px #fff;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
}
.button:hover, .button:focus {
   border-color: #999;
   background: -webkit-linear-gradient(top, white, #E0E0E0);
   background:    -moz-linear-gradient(top, white, #E0E0E0);
   background:     -ms-linear-gradient(top, white, #E0E0E0);
   background:      -o-linear-gradient(top, white, #E0E0E0);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border: 1px solid #AAA;
   border-bottom-color: #CCC;
   border-top-color: #999;
   -webkit-box-shadow: inset 0 1px 2px #aaa;
   -moz-box-shadow:    inset 0 1px 2px #aaa;
   box-shadow:         inset 0 1px 2px #aaa;
   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);
   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);
   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);
}

View Demo   Download Files

Special thanks to Dennis Sa who sent me a JSbin of some Matte Buttons he was working on which made me think of the YouTube buttons and get started on all this.

Trevor Gerzen applied transitions to them, if that's to your liking.

Comments

  1. The subtleness of the button before hover is a really good idea, especially for footers.

    Why role=button though? Isn’t that the default role for button tags anyway?

  2. tehniobium
    Permalink to comment#

    How come the margin around the buttons in the preview-images in your post gets smaller and smaller for each one?

  3. Permalink to comment#

    Anyone have a tutorial or example of how I could build the menu functionality on these buttons like Youtube does?

    • Dominicanstan
      Permalink to comment#

      They use Ajax…
      You should check: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

  4. Tom
    Permalink to comment#

    How do you get rid of the dropdown arrows?

  5. I was actually just thinking how cool these looked!

  6. Permalink to comment#

    Great post! I LOVE the design of the youtube! Very cool :)

  7. I still prefer your button :p

  8. Nice post! Curious why you use prefixed box-shadow? I would rather not prefix a candidate-recommendation CSS features like box-shadow or border-radius.

  9. Permalink to comment#

    Actually the button looks so good that its hard to go back to conventional button anymore :p

  10. Permalink to comment#

    Great CSS-Snippet! Thank you :)

  11. Permalink to comment#

    I’ve always been a fan of the Youtube button. They really are attractive!

  12. Permalink to comment#

    so nice! thanx

  13. Permalink to comment#

    Great looking hover effect on these buttons. Thanks for sharing!

  14. Permalink to comment#

    Funny thing about the buttons – I just went to Youtube to see the buttons. Theese are youtube buttons. Theese are prettier…

  15. Permalink to comment#

    Great snippe, thanks. But does anybody know where this little arrow on the right comes from? Couldn´t find it in the code. ( : /

  16. Awesome.
    Why after click the button, the style not back to default state?

    • Thomas
      Permalink to comment#

      After clicking the button, it is in :focus state. To return to the default state, you’ll need to give another element focus (e.g. click somewhere else on the page or handle it programatically).

  17. pigman
    Permalink to comment#

    great work~!

  18. Ciwan
    Permalink to comment#

    Loved it ! Thank You Chris.

  19. Great post, really think this styling will be useful on future web designs. Thanks

  20. Permalink to comment#

    if only there was no need for web kits!

  21. Rahul
    Permalink to comment#

    Hi,
    I am not able to work with border-radius. I encounter a solid edge when i view it in my browser IE 6.0

    • Naresh
      Permalink to comment#

      hi,
      ie will not be support the css3 in directly. u most need the jquery to support that in ie.
      i’ll give u the link in some more time..

  22. Naresh
    Permalink to comment#

    relay great ……

    • Rahul
      Permalink to comment#

      thanks naresh.. pls send me the jquery link as soon as you get one…

  23. Great CSS-Snippet! Thanks for that. I am great fan of youtube and also want to put this into my blog. this post will help me a lot

  24. Permalink to comment#

    Nice idea but not really browsercompatible. Although i am going to use it :)

  25. Puneet
    Permalink to comment#

    I love to read and learn from your articles :)

  26. Permalink to comment#

    These are very cool buttons, thanks Chris!
    Overall this new Google design that includes redesign for YouTube is very clean and good looking. Great step forward more intuitive UI and up to date design.

  27. bicho
    Permalink to comment#

    coool buttons , but i want to explain how to make dropdown menu with this buttons

    thank you so much ….

  28. Permalink to comment#

    Absolutly great tutorial! Do this kind of buttons always in ps :D

    Thanks a lot for that!

  29. thnx Chris

  30. Jinsu Mathew
    Permalink to comment#

    Thanks Chris for this awesome css. Can you explain how to put that down arrow symbol too at the end of each button as shown in the demo?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".