Remove Mobile Firefox Button Gradient

By  on  

If you have an Android device, you've gotta check out Firefox for Android.  It's an outstanding mobile browser -- it has been very well received and you can even install apps from the Firefox Marketplace from within this awesome browser.  One usability practice implemented by Firefox for Android is a gradient shade on all button elements.  While I appreciate the idea, I don't necessarily want this added to elements which I want to look a very specific way.  Removing this gradient effect is simple:

/* Cancels out Firefox Mobile's gradient background */
button {
	background-image: none;
}

Before you jump on Mozilla for this practice, WebKit-based browsers do something very similar.  Preventing this effect is also very simple so if you want to remove this gradient, use the code above and you're on your way!

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    MooTools Kwicks Plugin

    I wrote a post titled Get Slick with MooTools Kwicks ages ago. The post was quite popular and the effect has been used often. Looking back now, the original code doesn't look as clean as it could. I've revised the original...

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

Discussion

  1. Works with input and textarea elements too :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!