CODEWITHSUNDEEP
htmlcsslinear-gradients
JQuery Mobile
JQuery Mobile

Reputation: 6301

CSS - Partial Background Fill

I have a button that I am trying to animate via CSS. My button, is currently defined like this:

<style>
  .btn {
    color: #333;
    background-color: #fcfcfc;
    background-image: linear-gradient(to bottom,#fcfcfc 0,#f1f1f1 100%);
  }

  .btn-50 {  
    background: -webkit-linear-gradient(#fcfcfc 50%, orange 50%);
  }
</style>

<button class="btn"><i class="icon run"></i>Run</button>

Initially, the button looks correct. When the user clicks the "Run" button, I add the btn-50 at a specific point. However, that style does not look correct. My intent is to have the orange part lay on top of the existing gradient. However, what's happening is the button's background becomes part orange and part white.

Is there a way for me to have kind of like three layers for a button? Something like this:

[content]
[orange fill]
[original background gradient]

I want my content to be non-distorted. I also want the user to still be able to interact with the button. I also want the original effect in place. I just need to insert the orange in there to indicate percentage somehow.

Is there a way to do this via HTML and CSS?

Upvotes: 2

Views: 3131

Answers (1)

Harry
Harry

Reputation: 89760

If you want the orange part (the second gradient) to lay on top of the existing gradient then you need to set multiple backgrounds to an element like in the below snippet (in a comma separated format, where the first gradient specified forms the topmost layer and the last one becomes the bottom layer) and not overwrite the background setting.

In your current snippet when the btn-50 class is added, the background gradient specified within it overwrites the one specified by btn.

Note:

  1. Neither of your gradients actually have an alpha part (in other words, they are not transparent) and so even if you add the orange gradient on top of the existing gradient, it would not have much of a visual effect.
  2. Another thing that you should note is that the gradients themselves have different behavior. The first gradient is not a hard-stop gradient (that is, the color changes gradually between 0% and 100%) whereas the second is a hard-stop gradient (that is, till 50% first color would be shown and at 50% it suddenly changes to orange and maintains the orange color till 100%).
  3. Another thing that you could try doing is replace the #fcfcfc (in the gradient which also contains orange) with transparent. This would also make the bottom layer show through. I have added one sample for this also in the snippet.

.btn {
  color: #333;
  background-color: #fcfcfc;
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50 {
  background: linear-gradient(#fcfcfc 50%, orange 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50v {
  background: linear-gradient(rgba(251, 251, 251, 0.75) 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50t {
  background: linear-gradient(transparent 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, #fcfcfc 0, #f1f1f1 100%);
}
.btn-50v2 {
  background: linear-gradient(rgba(251, 251, 251, 0.75) 50%, rgba(255, 201, 14, 0.75) 50%), linear-gradient(to bottom, red 0, blue 100%);
}
<h3>Initial State</h3>
<button class="btn"><i class="icon run"></i>Run</button>

<h3>After btn-50 class is added</h3>
<button class="btn btn-50"><i class="icon run"></i>Run</button>

<h3>After btn-50 class is added with transparent top part</h3>
<button class="btn btn-50t"><i class="icon run"></i>Run</button>

<h3>After btn-50 class with semi-transparent top gradient</h3>
<button class="btn btn-50v"><i class="icon run"></i>See the gray of bottom layer showing through the top (above the orange)</button>

<h3>After btn-50 class with semi-transparent top gradient and different bottom layer</h3>
<button class="btn btn-50v2"><i class="icon run"></i>You can see how colors in the bottom layer are seen through the top layer</button>

Upvotes: 2

Related Questions