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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    New MooTools Plugin:  ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

  • By
    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...

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!