CODEWITHSUNDEEP
htmlcss
user2648727
user2648727

Reputation:

scale form background button image

how can I make the form button in the following jsfiddle responsive both width and height to its container (fluid) - whilst scaling to the background image ratio?

https://jsfiddle.net/yykkrgbt/

here's what I have so far

<div style="max-width:500px;">
    <input type="submit" class="activate" value="activate!" />
</div>

.activate{
    background:transparent 
url('https://www.rewardtag.com/images/activate_button_hov.png') no-repeat;
    width:100%;
    background-size: contain;
}

If i set the height of the button - it works, but I want the height to scale along with the width. At the moment I can only have it fluid in width.

I am completely lost here. thank you in advance.

Upvotes: 0

Views: 144

Answers (1)

Liviu A
Liviu A

Reputation: 451

you could use input type image instead

<input type="image" class="activate" src="https://www.rewardtag.com/images/activate_button_hov.png" alt="Submit">

and in your css

.activate { width: 100%; height: auto; }

Upvotes: 2

Related Questions