KPC
Kevin Powell - Community•5mo ago
thethingisback

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);
}
No description
5 Replies
MarkBoots
MarkBoots•5mo ago
without seeing the svg not possible to tell. drop it in a codepen please, including the relevant css
thethingisback
thethingisback•5mo ago
MarkBoots
MarkBoots•5mo ago
the svg was a bit flawed, i redrew it and adjusted the css slightly https://codepen.io/MarkBoots/pen/GRexdPa
thethingisback
thethingisback•5mo ago
awesome thank you! I'll have to look into redrawing svg's I guess
MarkBoots
MarkBoots•5mo ago
using a vector program such as figma (which has a free tier) can help with that.
Want results from more Discord servers?
Add your server
More Posts
Deal with img width and heightHi everyone! I've been using width and height attributes on img markups for quite some time now simHaving trouble adding a sidebar to my grid systemI'd really love help here if someone can dissect and figure out my dilemma. I have this WordPress sWhen do I use the grid-column/grid-row property over grid-template-areas?Hello so I know both grid-column/grid-row and grid-template-areas are both effected by the grid-tempIs it possible to have a child element's height even across cards with CSS only?I'd like to know if it's possible, with CSS only, to have the title (blue) box match the height of tThe Responsive Text CSS in Adobe Muse Affair(I don't know why I have phrased like the title of a Tintin book). Hey There, I hope you are well?Icon font or directlyWhat is the way to go? Implement icons with an icon font or integrate the svg's directly? Which Localized Page QuirksHello everyone! I'm working on localizing 7 landing pages on my site. Did any of you ever do somethiHow to build new Hero grid designsI have seen these new Hero designs in Dribble and Pinterest. How would you develop something like thText in a card shrinking to multiple lines at small screen sizes making the card look a messHow can I make I text in a card not shrink but fit well in small screen sizes like 375px? Because itHow do I go about learning site design?I am re-learning CSS (why I am here 😀 ), but how do others learn the how to of designing the gener