Bottom border on button disappears on hover - html

Question

For some reason, the bottom border on my button disappears on hover, and I have no idea why. It works perfectly locally, but when I check my site live it disappears.
Here is my Codepen https://codepen.io/ecanada138/pen/ExXRXoW, which is the exact code on my repo.
Here is the site https://8thvisionmedia.netlify.app/, where you can see the problem but it does not show up on CodePen or locally
#font-face {
font-family: cocogoose-regular;
src: url('../fonts/Cocogoose-Classic-Medium-trial.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgb(255, 255, 255);
height: 20px;
}
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* pointer-events: none; */
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh;
/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: -1; */
}
.phone-nav {
display: none;
}
.navbar-nav {
display: flex;
flex-direction: column;
margin-top: 1rem;
color: rgb(255, 255, 255);
font-size: 1rem;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.1rem;
border: 1px solid rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler:focus {
box-shadow: none;
}
.desktop-nav-container {
flex-direction: row;
justify-content: center;
}
/* .nav-link-desktop::after{
content: ' |';
} */
#media screen and (max-width: 992px) {
.phone-nav {
display: block;
}
}
.home-container {
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
}
.home-row {
padding: 0 10rem 0 10rem;
z-index: 1000;
}
.home-text {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
}
.home-col {
width: 100%;
}
.col-logo {
position: absolute;
left: 2rem;
bottom: 1rem;
margin-bottom: 0.5rem;
padding: 0;
}
.row-copyright {
position: absolute;
right: 2rem;
bottom: 1rem;
font-family: 'Montserrat', sans-serif;
}
.vision-media-logo {
width: 3rem;
}
a {
color: rgb(255, 255, 255) !important;
font-size: 14px;
}
.fa {
font-size: 2rem;
}
ul {
text-align: center;
}
#media screen and (min-width: 1399px) {
.home-row {
padding: 0 20rem 0 20rem;
}
}
#media screen and (min-width: 1800px) {
.home-row {
padding: 0 35rem 0 35rem;
}
}
#media screen and (min-width: 2200px) {
.home-row {
padding: 0 50rem 0 50rem;
}
}
#media screen and (max-width: 767px) {
.navbar-nav {
margin-right: 0;
}
.home-row {
padding: 0 3rem 0 3rem;
}
}
#media screen and (max-width: 575px) {
.home-row {
padding: 0 1rem 0 1rem;
margin-top: -8rem;
}
.home-text {
font-size: 1rem;
}
.vision-media-logo {
width: 2rem;
}
.col-logo {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.row-copyright {
position: absolute;
right: 1rem;
bottom: 0rem;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
}
/* .myIcon {
margin-left: 3rem;
margin-right: 3rem;
}
.hide {
visibility: hidden;
font-size: 1rem;
margin-top: 10px;
opacity: 0;
text-transform: uppercase;
text-align: center;
transition: 0.8s;
}
.myIcon:hover .hide {
visibility: visible;
opacity: 1;
}
.myIcon {
z-index: 1000;
}
*/
#media screen and (max-width: 576px) {
.vimeo-wrapper {
background-image: url('../images/home-screen-bg.jpg');
background-position: center;
background-size: cover;
}
.vimeo-wrapper iframe {
display: none;
}
.phone-container {
position: relative;
}
}
#media screen and (max-width: 515px) {
.fa-col {
display: flex;
flex-direction: row;
}
}
#media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.desktop-nav-container {
display: none !important;
}
}
.col-copyright {
margin-bottom: 1rem;
}
#media screen and (max-width: 992px) {
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0.5rem 1rem;
border: none;
height: 100%;
font-size: 1rem;
}
}
.create-button {
background-color: rgba(255, 255, 255, 0);
color: rgb(255, 255, 255);
outline: 0;
border: 1px solid rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(255, 255, 255) !important;
font-family: 'cocogoose-regular';
letter-spacing: 2px;
margin: auto;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
transition: 0.5s ease;
}
.create-button a {
text-decoration: none;
}
.create-button:hover {
background-color: rgba(255, 255, 255, 0.3);
/* color: rgb(255, 255, 255); */
/* outline: 0; */
/* border: 1px solid rgb(255, 255, 255); */
/* font-family: 'cocogoose-regular'; */
/* letter-spacing: 2px; */
/* width: 100%; */
/* padding: 1rem 2rem; */
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5826f42d14.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<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=Montserrat:wght#400&display=swap" rel="stylesheet" />
<!-- CSS SHEETS -->
<link rel="stylesheet" href="css/index.css" />
<title>8th Vision Media | Real Estate Video and Photo Production</title>
<link rel="shortcut icon" type="image/png" href="./images/8-vision-logo-favicon.ico" />
</head>
<body>
<!--------------------------------------- NAV BAR --------------------------------------------------->
<div class="phone-container">
<nav class="navbar navbar-expand-xxxxxxl phone-nav">
<div class="container-fluid">
<button class="navbar-toggler custom-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarNav">
<ul class="navbar-nav flex-column">
<!-- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Video Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./core-values.html">Core Values </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Get In Touch</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="./our-people.html">Our People</a>
</li> -->
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.instagram.com/8thvisionmedia/">Our Work</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg desktop-nav">
<div class="container-fluid">
<div
class="collapse navbar-collapse desktop-nav-container"
id="navbarNavAltMarkup"
>
<div class="navbar-nav">
<a
class="nav-link nav-link-desktop"
aria-current="page"
href="./contact.html"
>Get In Touch</a
>
<a class="nav-link nav-link-desktop" href="./core-values.html"
>Core Values
</a>
<a class="nav-link nav-link-desktop" href="./gallery.html">Video Gallery</a
>
<a
style="border-right: none; text-decoration: none"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"
>Our Work</a
>
</div>
</div>
</div>
</nav>
<div class="vimeo-wrapper">
<iframe
src="https://player.vimeo.com/video/570788340?background=1&autoplay=1&loop=1&byline=0&title=0"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<div>
<div class="container-fluid home-container">
<div class="row home-row">
<div class="col home-col">
<!-- <p class="home-text">
We create powerful visual content for brands that help drive
sales, growth and engagement.
</p> -->
<button
onClick="window.open('https://www.8thvisionmedia.com/contact');"
class="create-button"
>
<a
href="./contact.html
"
>CREATE WITH US
</a>
</button>
</div>
</div>
<!-- <div class="row fa-row text-center">
<div class="col fa-col">
<span>
<a
href="https://www.instagram.com/8thvisionmedia/"
target="_blank"
><i class="myIcon fab fa-instagram fa-2x"
><p class="hide">What We Do</p></i
></a
></span
><span
><a href="mailto:create#8thvisionmedia.com"
><i class="myIcon far fa-envelope fa-2x"
><p class="hide">Take Your Next Step</p></i
></a
>
</span>
</div>
</div> -->
<div class="row row-logo">
<div class="col col-logo">
<img class="vision-media-logo" src="./images/8th-vision-logo.png" />
</div>
</div>
<div class="row row-copyright">
<div class="col col-copyright">
<a>© 2021 8th Vision Media</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

remove transform: scale(1.1);
it worked

Answer 2

It worked fine on firefox. But I saw the issue on edge. and solved it by adding padding to .home-col class.
add the following and it should work fine:
.home-col {
padding: 10px;
}

Answer 3

I dont know exactly the reason, but changing "scale" value will solve the problem :
transform: scale(1.2); for example