CODEWITHSUNDEEP
css
user9277271
user9277271

Reputation:

How to remove button lines around svg element

I have a button like this:

svg {
  width: 30px;
}
<button>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg>
</button>

And it looks like this:

capture

Now I want to remove those lines around the SVG circle shape that looks like a rectangle.

So how can I do that?

UPDATE:

If I add, button{ border: none}

It will look like this:

enter image description here

But I want to completely remove the grey shape at the background of SVG!

Upvotes: 0

Views: 705

Answers (2)

Arslan
Arslan

Reputation: 36

button {
    border: 0;
    background: none;
}

Actuality, the rectangle is a border. So all you need to do is remove the border.

Upvotes: 0

Ammad Amir
Ammad Amir

Reputation: 518

I add class on button tag and remove border & background-color

.btn-svg{
  border: none !important;
  background-color: transparent !important;
  outline: none
}
svg {
  width: 30px;
}
<button class="btn-svg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg>
</button>

Upvotes: 1

Related Questions