Creating a scalable button with text and a SVG icon
Hi everyone. I am trying to create a scalable SVG button, that changes the padding around both the text and svg, based on the font-size of the text. Usually I use the css selector below on an anchor tag to create a button that changes padding (specified in em) based on the font-size.
<a className="btn" >Vote</a>
.btn{
display: inline-block;
font-size: 1.5rem;
padding: 0.75em 1.75em;
color: red;
background-color: white;
border: 2px solid red;
font-weight: 700;
}
I would like to achieve a similar effect, where a change in the font-size (specified in rem) changes the padding around the text and svg proportionally, aswell as the size of the svg. I have attached an image of the scalable button that I am trying to create. Does anyone have any ideas how I might create this?
<a className="btn" >Vote</a>
.btn{
display: inline-block;
font-size: 1.5rem;
padding: 0.75em 1.75em;
color: red;
background-color: white;
border: 2px solid red;
font-weight: 700;
}
I would like to achieve a similar effect, where a change in the font-size (specified in rem) changes the padding around the text and svg proportionally, aswell as the size of the svg. I have attached an image of the scalable button that I am trying to create. Does anyone have any ideas how I might create this?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
