I’m currently tackling a project that involves the use of two buttons with different sizes. Despite both buttons having the same specified border-radius of 6px, they seem to display differently in the browser. The smaller button appears to have a larger border-radius than the larger button, even though they are set to the same pixel value.
My objective is to make the smaller button look like a scaled-down version of the larger button, maintaining a consistent visual border-radius. This would ensure that both buttons appear identical in terms of their border-radius, regardless of their individual sizes.
Is there a method to achieve this using CSS calc()? I am seeking a solution involving calc() since I am restricted from altering the 6px value as it is designated as a variable in my project.
.small {
padding: 0.1rem 0.6rem;
font-size: 0.475rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}
.large {
padding: .5rem 3rem;
font-size: 1rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}<button class="small">Test</button>
<button class="large">Test</button>.small {
padding: 0.1rem 0.6rem;
font-size: 0.475rem;
color: white;
border-radius: calc(6px / 2); // This is my attempt to address the issue
background-color: red;
border: none;
}
.large {
padding: .5rem 3rem;
font-size: 1rem;
color: white;
border-radius: 6px;
background-color: red;
border: none;
}<button class="small">Test</button>
<button class="large">Test</button>