Creating a border around an SVG element using the background color of its parent container

I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of the button.

I'm working with react & material-ui, where the Icons and colors are dynamic and only known at runtime.

In summary, my goal is to ensure readability of both icons. I believe outlining the SVG with itself is a good approach, but I am open to other solutions. I am currently struggling to 'inherit' the background-color of the button and apply it as the font-color of the outline SVG, while making sure it works seamlessly with the :hover transition

.svg-bottom-icon {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: 1.8rem;
}

.svg-outline-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: 1.8rem;
  color: white;
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 6;
  font-size: 20px;
  left: 25px;
  position: absolute;
  top: 0;
}

.svg-top-icon {
  -webkit-user-select: none;
  */ -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: 1.8rem;
  font-size: 20px;
  left: 25px;
  position: absolute;
  top: 0;
}

body {
  font-size: 20px;
}

button.hover,
.button:hover {
  text-decoration: none;
  background-color: rgba(189, 189, 189);
  border: 1px solid #bdbdbd;
}

.fix .svg-outline-icon {
  color: rgba(189, 189, 189);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  min-width: 64px;
  padding: 3px 9px;
  border-radius: 4px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border: 1px solid rgba(189, 189, 189, 0.5);
  color: #bdbdbd;
  color: #333;
  background-color: #fff;
  min-width: auto;
  margin-left: 8px;
}

.box {
  padding: 20px;
  margin: 10px;
  border: 2px dotted #333;
}
<div class="box">
  example: (hover over this button):
  <button class="button" type="button">
    <div class="root">
        <svg class="svg-bottom-icon" viewBox="0 0 24 24">
            <path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
        <svg class="svg-outline-icon" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
        <svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
    </div>
</button>
</div>

<div class="box">
  goal: <br/> this hovered state:
  <button class="button hover" type="button">
    <div class="root">
        <svg class="svg-bottom-icon" viewBox="0 0 24 24">
            <path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
        <svg class="svg-outline-icon" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
        <svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
    </div>
</button>
  <br/>
should inherit background color:
  <button class="button hover fix" type="button">
    <div class="root">
        <svg class="svg-bottom-icon" viewBox="0 0 24 24">
            <path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
        </svg>
        <svg class="svg-outline-icon" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
        <svg class="svg-top-icon" viewBox="0 0 24 24" data-testid="AddIcon">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </svg>
    </div>
</button>
</div>

cssmaterial-ui

Answer №1

currentColor represents the calculated value of the color property, with no alternative that is based on the background color.

However, you can define the color for the SVG when the button is hovered over - in this case, it will "inherit down" like the currentColor:

.button:hover .svg-outline-icon {
  color: rgba(189, 189, 189);
}

(You may need to adjust the transition settings a bit, as currently the color change does not occur simultaneously with just that adjustment.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What is the most effective way to implement a CSS stylesheet on a particular individual element?

Just starting out in web development and I recently experimented with a CSS stylesheet on a basic HTML element. It worked great when I targeted the element by name like this: label { color: green; } However, I wondered if there was a way to apply sty ...

htmlcss

The content division does not have a set position

The content div is not adapting to different screen sizes properly. As the width and height of the browser shrink, it's overlapping with the header and footer. I'm using flex but I'm unsure if I'm implementing it correctly. display: ...

htmlcssresponsive

Flutter Code Input Pin Field

I am working on creating a pin input feature using flutter. After searching online, I came across some examples like this one and also found an image reference here. However, I encountered issues with scaling the input to fit the container width and implem ...

dartfluttermaterial-designmaterial-uiflutter-layout

Is it possible to manipulate div elements with JavaScript while utilizing node.js?

It seems like I'm missing something obvious here, as I'm working with node.js and I have correctly linked a javascript file (alert("hello"); works). However, I can't seem to make any changes to the DOM. Here's a simple example: jade: ...

javascriptcssnode.jspugstylus

Deactivating the Grid and its offspring in React.js MUI

Is it possible to Disable the Grid (MUI Component) and its Children in React js? Additionally, how can we Disable any Container and its items in React js, regardless of the type of children they have? For example: <Grid item disabled // ...

javascriptreactjsmaterial-ui

What is the best way to create inline-block elements that stretch the entire width of their container?

How can the input field and button behavior be optimized for this specific display: ...

htmlblockcss

Error in Material-UI v1: Invalid Element Type for Swipeable Drawer

While working on my project, I added a SwipeableDrawer, but encountered the following error: × Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot t ...

reactjsmaterial-ui

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears. For example, the first bar would appear at 100px, the second at 110px, and so on. I've been experimen ...

csssassbackgroundlinear-gradients

Modifying the Vue page background directly from a page: a step-by-step guide

UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...

cssvue.jsvuejs3

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...

javascriptcsslayouttwitter-bootstrapweb

Utilizing MUI for layering components vertically: A step-by-step guide

I am looking for a way to style a div differently on Desktop and Mobile devices: ------------------------------------------------------------------ | (icon) | (content) |(button here)| ----------------------------------------- ...

cssreactjstypescriptmaterial-ui

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent

Angular CodeMirror Line-Break function not displaying line numbers

I am currently utilizing Code Mirror from ngx-codemirror. My goal is to split the line when it fits within the width of the parent container. After searching, I found a couple of solutions that suggest using: lineWrapping: true Additionally, in the styles ...

cssangulartypescriptcodemirrorngx-codemirror

Excessive content spilling over into the footer area due to an integrated forum feature within

We have integrated a Muut forum into our website, and it is working well when embedded in a coding block within the page's body. However, there is an issue where the sidebar of the forum gains extra features when logged in as an admin. This causes the ...

htmlcssoverflowembedforum

The CSS Accordion seems to be the culprit behind the missing margin or border at the top of my page

Although everything on the page is functioning as desired, there seems to be a missing margin or border that is not causing much trouble. If there is a simple solution or an easy way to identify why this is happening, it would be greatly appreciated. Take ...

cssborderaccordionmargin

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

htmlcsshtml-tablemultiple-columns

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image