Home/ Questions/Q 8214415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:27:19+00:00

I want to create a button with a textured background, a gradient, and an

  • 0

I want to create a button with a textured background, a gradient, and an icon that is aligned to the left. This is the code I have but the background gradient is not showing. 

background:#B1D521;
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -o-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -moz-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -webkit-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-image: url(../images/icon-heart.png), url(../images/bg-tile.png), -ms-linear-gradient(bottom, rgb(152,185,32) 42%, rgb(177,213,33) 71%);
background-repeat:no-repeat, repeat;
background-position:10% center;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I came up with the answer eventually. It’s a workaround but I added a span inside the button with the same width and height and set it to be transparent, then on hovering over the button I do a transition on the opacity of the button. this way I can fake the transition with multiple backgrounds and a gradient.

    http://jsfiddle.net/gBDAy/

    • 0