How to properly centralize span inside a button? - html

Question

I'm trying to give the look of a gradient border to a button by creating a span inside the button and setting some padding difference between them.
It works pretty well on codepen, but when I pass it to my website, something happens and these tags suddenly stop being aligned.
However, which is the best way to set a span centralized inside a button in order to simulate a border?
body{
background:white;
text-align:center;
box-sizing:border-box;
font-family:"Lato",Sans-serif;
padding-top:5%;
/* position:relative; */
}
.btn:link,
.btn:visited{
text-decoration: none;
text-transform:uppercase;
position:relative;
top:0;
left:0;
padding:22px 2px;
border-radius:100px;
display:inline-block;
transition: all .5s;
}
.btn-white{
background-image:linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color:#000;
font-family: Lato;
font-size:1.3rem;
}
.btn span {
align-items: center;
background-color: #fff;
border-radius:100px;
display: absolute;
justify-content: center;
padding:20px 40px;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span {
background: transparent;
}
.btn:hover{
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
border: none;
box-shadow:0px 10px 10px rgba(0,0,0,0.2);
color: #fff;
transform : translateY(-3px);
}
.btn:active{
box-shadow:0px 5px 10px rgba(0,0,0,0.2)
transform:translateY(-1px);
}
.btn-bottom-animation-1{
animation:comeFromBottom 1s ease-out .8s;
}
.btn::after{
content:"";
text-decoration: none;
text-transform:uppercase;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:100px;
display:inline-block;
z-index:-1;
transition: all .5s;
}
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
<a class="btn" href="#">
<span>A brand new button!</span>
</a>

Answer 1

Well if it worked in Codepen and now doesn't its because your site is overriding something or you're not including the reset/normalize or vendor prefixing that Codepen is using by default.
Now you shouldn't need to do any "centering" to accomplish what I think you want.
Simply make the span a block level element and give it a margin or give the button padding.
button {
background-color: blue;
border: 2px solid darkBlue;
font-size: 14px;
padding: 4px;
}
button span {
display:block;
background: tan;
border:2px solid aqua;
padding: 10px 20px;
color: white;
}
<button>
<span>Text</span>
</button>

Answer 2

May be this is the solution that you intended to achieve. I have to edit a lot to your code to achieve that. Here is Codepen version
body {
background: white;
text-align: center;
box-sizing: border-box;
font-family: "Lato", Sans-serif;
padding-top: 5%;
/* position:relative; */
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
/* position: relative; */
/* top: 0; */
/* left: 0; */
padding: 10px;
/* this padding will be your gradient border */
border-radius: 100px;
display: inline-block;
transition: all .5s;
border: none;
}
.btn:hover {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
/* border: none; */
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
/* color: #fff; */
transform: translateY(-3px);
}
.btn span {
/* align-items: center; */
background-color: transparent;
/* background-color: #fff; */
border-radius: 100px;
/* display: absolute; */
/* justify-content: center; */
/* padding: 20px 40px; */
/* padding: 20px; */
/* height: 100%; */
/* transition: background .5s ease; */
transition: all .5s ease;
/* width: 100%; */
display: block;
padding: 20px 40px;
}
.btn:hover span {
/* background: transparent; */
background: #fff;
color: #ccc;
}
/* .btn-white {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
color: #000;
font-family: Lato;
font-size: 1.3rem;
} */
/*
.btn:active {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.btn-bottom-animation-1 {
animation: comeFromBottom 1s ease-out .8s;
} */
/* .btn::after {
content: "";
text-decoration: none;
text-transform: uppercase;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100px;
display: inline-block;
z-index: -1;
transition: all .5s;
} */
/*
.btn-white::after {
background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
background-color: #fff;
}
.btn-animation-1:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
#keyframes comeFromBottom {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
*/
<a class="btn" href="#">
<span>A brand new button!</span>
</a>