CODEWITHSUNDEEP
htmlcssbuttonsvgstyling
luckysing_noobster
luckysing_noobster

Reputation: 2013

Center align an svg to a button with grey background

I have a button with an image which I want to align to the center . I want the button to have a grey background.

HTML:

 <button type="submit" data-target="#modal">
            <img className="rainbow" role="presentation" />
 </button>

CSS:

.rainbow {
  background: url("/static/icons/arrow.svg") no- repeat center;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  height: 53px; 
  width: 50px;  
  background-color: $welcome-gray-1;
}

final_image_button

icon_center_aligned

Upvotes: 0

Views: 269

Answers (1)

Ginger Wizard
Ginger Wizard

Reputation: 717

You dont need to have an inline image and you need to apply the background to the button element.

button {
  background: #000 url("/static/icons/arrow.svg") no-repeat center;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  height: 53px;
  width: 50px;
}
<button type="submit" data-target="#modal" />

Upvotes: 1

Related Questions