Styling submit button with both text and images

Question

I've been having trouble trying to style a submit button. I'm trying to make it an image with a red/dark red gradient and border, with the words "Search" in the middle, then a small magnifying glass right after the words "Search". Easy enough... but it needs to be able to stretch in width as the window resizes without stretching the words/magnifying glass. It also needs to work on destkop, mobile and tablet. How would I go about doing this?

user3835327 · Accepted Answer · 2014-08-26 03:22:52Z

1

Is this the effect you aiming for?

<img width="in %">

demo : http://jsfiddle.net/e2qpfakq/5/

answered Aug 26, 2014 at 3:22

user3835327

5781 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaks20 · Accepted Answer · 2014-08-26 03:08:09Z

0

Define width of button in percent, that will work.

width: 70%;

Use SVG image as background along with background-size: cover.

Example fiddle

edited Aug 26, 2014 at 3:08

answered Aug 26, 2014 at 2:53

Aaks20

4013 silver badges4 bronze badges

2 Comments

user2588317 Over a year ago

But it will stretch the images

Aaks20 Over a year ago

Couple of ideas, Use background-size: cover; not sure whether this will help entirely with the image in use, but the best solution to handle image responsiveness is to use an SVG image as background.

Collectives™ on Stack Overflow

Styling submit button with both text and images

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related