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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

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!