Treehouse: Grow your CSS skills. Land your dream job.

CSS3 Buttons

  • # April 6, 2012 at 12:13 am

    @Hompimpa I think you have a future in UI Design

    # April 6, 2012 at 1:41 am

    @ChristopherBurton My KILLer problem: ……
    (Duh… what have I said? XXXXX)

    # April 6, 2012 at 12:36 pm

    @Hompimpa Awesome! Chocolate UI nice nice. How could this work also in IE?

    # April 6, 2012 at 11:23 pm

    @codex73 Even, I don’t know whether the range input support in Internet Explorer T_T

    # April 7, 2012 at 5:44 am

    Love this thread. I know I’m arriving late! Here’s my modest contribution – view in the light background
    That lego is a great use of :before and the sexy button has such a nice hover!

    # April 7, 2012 at 5:58 am

    @cwebbdesign +1
    Hehe… “+1” represent the habits of my friends Rudy who say that this is good :P

    # April 13, 2012 at 5:57 pm

    Added one of my own buttons to the mix. Hope you like! :)

    # February 9, 2014 at 7:47 am

    @Odd_E and all,
    the “Blue Minimal” button is very cool, however, I have two questions.
    a), adding an click event attribute to the button won’t work (the button disappears), see example below,
    Blue Minimal
    b) background (color) change won’t work, see below,
    // background: #407dc7; to
    background: #a2d3e9;

    Tested browser: Firefox v25 for Windows

    Any idea?


    # February 9, 2014 at 8:04 am

    Click events are handled by js so that’s another subject.

    As for the color, no just changing the bg colorwont do anything because the gradient is overriding the bg color.

    Oh…and way to revive a thread that’s been dormant for 2 years. Still perhaps someone as some new ideas.

    # February 9, 2014 at 8:39 am

    @Paulie_D, I see, thank you, and since we are at it,
    any simple CSS code to dress up an input box’s border just a bit?

    # February 9, 2014 at 9:30 am

    Start with outline: 0; and add styles as you please.

    input { 
      border: 1px solid #999;
      border-radius: 3px;
      outline: 0;
      /* padding: 0.5em 0.7em;  */ <- EMs depends on font-size
      /* font-size: 1em */ <- maybe set this elsewhere

    Make some :focus style.

    input:focus {
      box-shadow: inset 0 0 3px blue;

    Make validation classes to be used by your JavaScript or PHP or whatever.

    input.valid {
      border-color: green;
    input.invalid {
      border-color: red;
    # February 9, 2014 at 11:39 am

    aishamcan stop the spam posts. I’m reporting all of your replies.

    # February 10, 2014 at 6:40 am

    @dyr, thank you very much.

    # February 16, 2014 at 3:17 pm

    This thread is awesome! My favorite is Blue Minimal! Thanks @Odd_E

    Now I just need to figure out how to make a transition with gradients.

Viewing 14 posts - 46 through 59 (of 59 total)

You must be logged in to reply to this topic.