Kevin Powell - Community•10mo ago

Outline appearing around svg react-component when transform scaled?

The picture is what I'm seeing in my hover state for this basic <button/> element, which has an svg inside of it. the button:

import { ReactComponent as CloseBtn } from "../icons/close.svg";

 <button
   onClick={() => dialog.close()}
   className="modalClose_btn"
  >
   <CloseBtn />
 </button>

import { ReactComponent as CloseBtn } from "../icons/close.svg";

 <button
   onClick={() => dialog.close()}
   className="modalClose_btn"
  >
   <CloseBtn />
 </button>

The CSS:

.modalClose_btn{
     outline:none;
     border:none;
     position:absolute;
     right:1rem;
     top:1rem;
     background-color:transparent;
     display: block;
     margin-left:auto ; 
     z-index:50;
    margin: 0 !important;
}

.modalClose_btn>svg {
    height: 2.5rem;
    width: 2.5rem;
    transition: all .15s ease-in-out;;
    margin: 0 !important;
    border-radius:50%;
    fill:red;
}

.modalClose_btn:hover> svg{
    transform:scale(1.3 );
    fill:white;
    background-color:red;
    border:none;
    outline:none;
}

.modalClose_btn:hover{
    border:none;
    outline:none;
    box-shadow:var(--niceShadow1);
}

.modalClose_btn{
     outline:none;
     border:none;
     position:absolute;
     right:1rem;
     top:1rem;
     background-color:transparent;
     display: block;
     margin-left:auto ; 
     z-index:50;
    margin: 0 !important;
}

.modalClose_btn>svg {
    height: 2.5rem;
    width: 2.5rem;
    transition: all .15s ease-in-out;;
    margin: 0 !important;
    border-radius:50%;
    fill:red;
}

.modalClose_btn:hover> svg{
    transform:scale(1.3 );
    fill:white;
    background-color:red;
    border:none;
    outline:none;
}

.modalClose_btn:hover{
    border:none;
    outline:none;
    box-shadow:var(--niceShadow1);
}