inner box displaying on mobile with custom button design

Site URL: https://timecraft.group/home-draft

password for the site is "metaverse"

timecraft.group/home-draft

noticed an annoying graphic issue when I designed some custom buttons for a client site. When you view the site on mobile the buttons display a very subtle border around the text within the area of the button. However, when you check mobile view in squarespace or if you use chrome devtools to simulate the size on mobile the issue does not appear. You will likely need to enlarge the image to see what I am talking about, its a very subtle box surround the text of the button.

here is the code used for one of the buttons:

<style>

  .button-box {
    box-sizing:border-box;
    outline:none;
  }
  
.drawn-button1 {
      font-family: 'squada one';
      line-height: 1.2rem;
      align-self: center;
      text-align: center;
      background:#242637;
      padding:.6rem .6rem;
      margin:0 1rem;
      transition:all .5s ease;
      font-size:1.5rem;
      outline:none;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,50%,1);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      border:solid 7px #fff;
      opacity: 0;
      animation: appear1 2s linear 5s;
      animation-fill-mode: forwards;
      
}

@keyframes appear1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

      .drawn-button1:hover{
         box-shadow:2px 8px 4px -6px hsla(0,0%,50%,1);
      } 

  </style>

<div class="button-box">
   <a href="/#web3">
    <div class="drawn-button1">TWO.FIVE <br>
      <span style="font-family:'Roboto Slab';font-size:1rem; line-height:.8rem;margin-top:0px;padding-top:0px;">
        start your web3 journey</span> </div></a></div>

Anyone know how I can keep the inner box from showing up? It does not show up on desktop.

3 hours ago, NewClassicalDesign said:

Site URL: https://timecraft.group/home-draft

password for the site is "metaverse"

timecraft.group/home-draft

 

noticed an annoying graphic issue when I designed some custom buttons for a client site. When you view the site on mobile the buttons display a very subtle border around the text within the area of the button. However, when you check mobile view in squarespace or if you use chrome devtools to simulate the size on mobile the issue does not appear. You will likely need to enlarge the image to see what I am talking about, its a very subtle box surround the text of the button.

 

here is the code used for one of the buttons:

<style>

  .button-box {
    box-sizing:border-box;
    outline:none;
  }
  
.drawn-button1 {
      font-family: 'squada one';
      line-height: 1.2rem;
      align-self: center;
      text-align: center;
      background:#242637;
      padding:.6rem .6rem;
      margin:0 1rem;
      transition:all .5s ease;
      font-size:1.5rem;
      outline:none;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,50%,1);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      border:solid 7px #fff;
      opacity: 0;
      animation: appear1 2s linear 5s;
      animation-fill-mode: forwards;
      
}

@keyframes appear1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

      .drawn-button1:hover{
         box-shadow:2px 8px 4px -6px hsla(0,0%,50%,1);
      } 

  </style>

<div class="button-box">
   <a href="/#web3">
    <div class="drawn-button1">TWO.FIVE <br>
      <span style="font-family:'Roboto Slab';font-size:1rem; line-height:.8rem;margin-top:0px;padding-top:0px;">
        start your web3 journey</span> </div></a></div>

Anyone know how I can keep the inner box from showing up? It does not show up on desktop.

I check both on desktop and mobile are no box for text. Have you figured it out?

11 hours ago, bangank36 said:

I check both on desktop and mobile are no box for text. Have you figured it out?

 

no, I haven't figured it out. Again the problem only appears when you actually look on a mobile device, not just resize or simulate mobile while on your desktop. I've noticed it specifically in mobile safari and mobile chrome.