Grow your CSS skills. Land your dream job.

Pure CSS3 Button

  • # June 7, 2011 at 7:14 am

    Messing around with button design.

    Any thoughts?

    # June 7, 2011 at 7:39 am

    Why don’t you add support for the other browsers too? Also, you’re using the old webkit gradient method. The new one is the same as the other browsers.

    .button{
    background-image: -webkit-gradient(linear, left bottom, left top, from(#655445), to(#4a3421)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(bottom, #655445, #4a3421); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(bottom, #655445, #4a3421); /* FF3.6 */
    background-image: -ms-linear-gradient(bottom, #655445, #4a3421); /* IE10 */
    background-image: -o-linear-gradient(bottom, #655445, #453819); /* Opera 11.10+ */
    background-image: linear-gradient(bottom, #655445, #4a3421);} /* Currently not supported by any browser */
    }
    # June 7, 2011 at 9:06 am

    @jamy_za Just messing around at this stage so not worrying about any other prefixes. Thanks for the heads up about the gradient though, completely forgot it had been revised.

    # June 7, 2011 at 9:13 am

    Looks good but can’t you get rid of the extra div and just add the button class to the anchor?

    # June 7, 2011 at 9:20 am

    @andrewsellenrick I always over think the little things, thanks!

    # June 12, 2011 at 12:03 am

    Made a few changes, what do you guys think now?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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