Change button appearance in HTML

Question

How to remove this square stroke around a plus? I want to change the standard button to such a plus.

.button { background: url('https://cdn1.iconfinder.com/data/icons/interface-elements/32/add-circle-24.png'); background-size: contain; width: 24px; height: 24px; }

 <button class='button'></button>

the same stroke from the picture, it can not be removed - michael_best

Bert bert 1,470 2 ten · Answer 1 · 2018-11-16T15:34:35

 .button{ background: transparent url('https://cdn1.iconfinder.com/data/icons/interface-elements/32/add-circle-24.png'); background-size: contain; width: 24px; height: 24px; border: 0; outline: none; }

 <button class="button"></button>

developerstudent developerstudent one · Answer 2 · 2018-11-16T16:38:59

border-radius: 50%; in id

Rogatnev Nikita Rogatnev Nikita 1,536 four 27 · Answer 3 · 2018-11-16T15:34:25

Just zero border and outline

 .button { background: url('https://cdn1.iconfinder.com/data/icons/interface-elements/32/add-circle-24.png'); background-size: contain; width: 24px; height: 24px; border: 0; outline: none; }

 <button class="button"> </button>

Thanks a lot, it worked) But I am a noob and I have another question right away, how to make it so that when I press it, the same animation in the picture would be worked out as when I clicked on a regular button, or just to change color in css when I click?

Change button appearance in HTML

3 answers 3

More articles: