treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Pure CSS3 Button

  • Messing around with button design.

    Any thoughts?
  • 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 */
    }
  • @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.
  • Looks good but can't you get rid of the extra div and just add the button class to the anchor?
  • @andrewsellenrick I always over think the little things, thanks!
  • Made a few changes, what do you guys think now?