CSS border colour and radius issues on links - html

Question

I am having two issues with the following styled link.
There is a small, white border being displayed on the left and right sides of link on hover.
The ::before border radius is being applied during the transition on Webkit browsers. All other browsers are applying it before the transition.
I have tried adjusting z indexes for various elements, but this has had no effect on the small, white border issue.
I have tried applying border radius to a::before and a:hover::before to see if that would fix the issue in Webkit browsers, but no luck.
Any ideas on why these CSS issues are occurring?
body {
background-color: #1A1A1A;
padding: 3rem;
}
.cta {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
font-family: "Barlow", sans-serif;
letter-spacing: -0.0225rem;
color: #D61E15;
}
.cta--pill {
padding: 0.625rem 1rem 0.625rem 1.5rem;
position: relative;
overflow: hidden;
background-color: #fff;
border: 0.03125rem solid #E6E6E6;
border-radius: 1.3125rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.cta--pill::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: #D61E15;
border: 0.03125rem solid #D61E15;
border-radius: 1.3125rem;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.cta--pill .cta-text {
padding-right: 2.25rem;
position: relative;
z-index: 2;
}
.cta--pill .cta-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 0.4375rem;
right: 0.5rem;
z-index: 2;
background-color: #D61E15;
box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41);
border-radius: 100%;
border: 0.03125rem solid transparent;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.cta--pill:hover {
border-color: #D61E15;
box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41);
color: #fff;
}
.cta--pill:hover::before {
transform: translateX(0);
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#700&display=swap" rel="stylesheet">
<a class="cta cta--pill cta--no-shadow" href="#" title="View all services">
<span class="cta-text">All Services</span>
<span class="cta-arrow">
<svg role="img" class="arrow arrow--right" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02 1.183l.658-.658a.708.708 0 0 1 1.004 0l5.761 5.758a.708.708 0 0 1 0 1.004l-5.76 5.761a.708.708 0 0 1-1.005 0l-.658-.658a.712.712 0 0 1 .012-1.016l3.57-3.402H1.087a.71.71 0 0 1-.711-.711v-.949a.71.71 0 0 1 .71-.711h8.518L6.032 2.199a.707.707 0 0 1-.012-1.016z" fill="#FFF"></path>
</svg>
</span>
</a>

Answer 1

You may also slide background-gradients via background-position.
possible example:
body {
background-color: #1A1A1A;
padding: 3rem;
}
.cta {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
font-family: "Barlow", sans-serif;
letter-spacing: -0.0225rem;
color: #D61E15;
}
.cta--pill {
padding: 0.625rem 1rem 0.625rem 1.5rem;
position: relative;
overflow: hidden;
background-image: radial-gradient(circle at 75% 50%, #D61E15 1.3rem, transparent 1.35rem), linear-gradient(0, #D61E15, #D61E15);
background-repeat: no-repeat;
background-size: 200% 200%;
background-position: 180% 50%, 220% 0;
background-color: #fff;
border: 0.03125rem solid #E6E6E6;
border-radius: 1.3125rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.cta--pill:hover {
background-position: 50% 50%, 100% 0;
}
.cta--pill .cta-text {
padding-right: 2.25rem;
position: relative;
z-index: 2;
}
.cta--pill .cta-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 0.4375rem;
right: 0.5rem;
z-index: 2;
background-color: #D61E15;
box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41);
border-radius: 100%;
border: 0.03125rem solid transparent;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.cta--pill:hover {
border-color: #D61E15;
box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41);
color: #fff;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#700&display=swap" rel="stylesheet">
<a class="cta cta--pill cta--no-shadow" href="#" title="View all services">
<span class="cta-text">All Services</span>
<span class="cta-arrow">
<svg role="img" class="arrow arrow--right" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02 1.183l.658-.658a.708.708 0 0 1 1.004 0l5.761 5.758a.708.708 0 0 1 0 1.004l-5.76 5.761a.708.708 0 0 1-1.005 0l-.658-.658a.712.712 0 0 1 .012-1.016l3.57-3.402H1.087a.71.71 0 0 1-.711-.711v-.949a.71.71 0 0 1 .71-.711h8.518L6.032 2.199a.707.707 0 0 1-.012-1.016z" fill="#FFF"></path>
</svg>
</span>
</a>

Answer 2

You can try adding a negative inset to the ::before selector.
body {
background-color: #1A1A1A;
padding: 3rem;
}
.cta {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
font-family: "Barlow", sans-serif;
letter-spacing: -0.0225rem;
color: #D61E15;
}
.cta--pill {
padding: 0.625rem 1rem 0.625rem 1.5rem;
position: relative;
overflow: hidden;
background-color: #fff;
border: 0.03125rem solid #E6E6E6;
border-radius: 1.3125rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.cta--pill::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
z-index: 1;
background-color: #D61E15;
border: 0.03125rem solid #D61E15;
border-radius: 1.3125rem;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.cta--pill .cta-text {
padding-right: 2.25rem;
position: relative;
z-index: 2;
}
.cta--pill .cta-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 0.4375rem;
right: 0.5rem;
z-index: 2;
background-color: #D61E15;
box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41);
border-radius: 100%;
border: 0.03125rem solid transparent;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.cta--pill:hover {
border-color: #D61E15;
box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41);
color: #fff;
}
.cta--pill:hover::before {
transform: translateX(0);
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#700&display=swap" rel="stylesheet">
<a class="cta cta--pill cta--no-shadow" href="#" title="View all services">
<span class="cta-text">All Services</span>
<span class="cta-arrow">
<svg role="img" class="arrow arrow--right" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02 1.183l.658-.658a.708.708 0 0 1 1.004 0l5.761 5.758a.708.708 0 0 1 0 1.004l-5.76 5.761a.708.708 0 0 1-1.005 0l-.658-.658a.712.712 0 0 1 .012-1.016l3.57-3.402H1.087a.71.71 0 0 1-.711-.711v-.949a.71.71 0 0 1 .71-.711h8.518L6.032 2.199a.707.707 0 0 1-.012-1.016z" fill="#FFF"></path>
</svg>
</span>
</a>

Answer 3

Adding background-color: #D61E15; inside .cta--pill:hover will solve your white border problem.
body {
background-color: #1A1A1A;
padding: 3rem;
}
.cta {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
font-family: "Barlow", sans-serif;
letter-spacing: -0.0225rem;
color: #D61E15;
}
.cta--pill {
padding: 0.625rem 1rem 0.625rem 1.5rem;
position: relative;
overflow: hidden;
background-color: #fff;
border: 0.03125rem solid #E6E6E6;
border-radius: 1.3125rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.cta--pill::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: #D61E15;
border: 0.03125rem solid #D61E15;
border-radius: 1.3125rem;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform 0.35s ease-in-out;
-moz-transition: transform 0.35s ease-in-out;
transition: transform 0.35s ease-in-out;
}
.cta--pill .cta-text {
padding-right: 2.25rem;
position: relative;
z-index: 2;
}
.cta--pill .cta-arrow {
display: flex;
justify-content: center;
align-items: center;
width: 1.75rem;
height: 1.75rem;
position: absolute;
top: 0.4375rem;
right: 0.5rem;
z-index: 2;
background-color: #D61E15;
box-shadow: 0 2px 5px 0 rgba(176, 25, 17, 0.41);
border-radius: 100%;
border: 0.03125rem solid transparent;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.cta--pill:hover {
border-color: #D61E15;
background-color: #D61E15;
box-shadow: 0 4px 10px 0 rgba(176, 25, 17, 0.41);
color: #fff;
}
.cta--pill:hover::before {
transform: translateX(0);
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#700&display=swap" rel="stylesheet">
<a class="cta cta--pill cta--no-shadow" href="#" title="View all services">
<span class="cta-text">All Services</span>
<span class="cta-arrow">
<svg role="img" class="arrow arrow--right" width="14" height="14" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02 1.183l.658-.658a.708.708 0 0 1 1.004 0l5.761 5.758a.708.708 0 0 1 0 1.004l-5.76 5.761a.708.708 0 0 1-1.005 0l-.658-.658a.712.712 0 0 1 .012-1.016l3.57-3.402H1.087a.71.71 0 0 1-.711-.711v-.949a.71.71 0 0 1 .71-.711h8.518L6.032 2.199a.707.707 0 0 1-.012-1.016z" fill="#FFF"></path>
</svg>
</span>
</a>