how to remove the color gradient from the top of ui-button-right in jquery mobile?

Question

I have added the padding on top in the home button that in the header. Now I wants to disable the gradient effect from the top of the home button. I actually wants a plain color button. The home button should give a plain color and no top shadow like effects. See the example below

<style>
.ui-btn-left{
    padding-top:10px;
}
</style>
<div data-role="header" data-position="inline">
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" data-direction="reverse"  data-transition="slide" class="ui-btn-left">home</a>
    <h1>Resultaten</h1>    
</div>

http://jsfiddle.net/3EgrW/1404/

Answer 1

In fact the jQuery mobile modifies the HTML code by creating 1 inner span called .ui-btn-inner, this span wraps 2 other spans called .ui-btn-text and .ui-icon. So when you set padding-top on the a element, the whole inner span .ui-btn-inner is pulled down and the style is still effected making the ugly gradient above the text. So instead of setting padding-top on the a element, you have to set it on the .ui-btn-inner. However it's not such simple, the .ui-icon is positioned absolutely causing problem to align the button text and button icon. So I've tried setting the position to static, floating it to the left, adjusting the margin accordingly... Here is the CSS:

#header-right-button .ui-btn-inner {
  padding-left:5px;
  padding-top:13px;    
}
#header-right-button .ui-icon {    
  position:static;       
  float:left;
  margin:0;
  margin-right:5px;
}
#header-right-button {
  height:80px;
}

Demo.

If you want to remove the gradient border, try setting the border:none on the .ui-btn-inner. Here is the Demo. for this. It's fortunate that, if you just want this we have a much simpler code because you can just set the padding-top on the #header-right-button:

#header-right-button {
  padding-top:10px;    
  height:80px;   
}
#header-right-button > .ui-btn-inner {
  border:none;
}

Demo 2

Answer 2

You need to find where exactly in the css your button is getting its colour (gradient) from. In the example you've posted, the ui-button is getting its styling from the jquery.mobile.css file - you would need to overwrite that styling with your own. source - element inspector