Jump to content

inner box displaying on mobile with custom button design

Recommended Posts

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.

933907381_phonescreenshot.thumb.jpg.53ac869b13773bb5248dd93a2dc7e95d.jpg

 

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.

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

933907381_phonescreenshot.thumb.jpg.53ac869b13773bb5248dd93a2dc7e95d.jpg

 

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?

image.thumb.png.7a115487f313d7a8023a49b35377ca58.png

 

image.thumb.png.12f612e5a7bf24fa0822c39617e4ef0a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
11 hours ago, bangank36 said:

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

image.thumb.png.7a115487f313d7a8023a49b35377ca58.png

 

image.thumb.png.12f612e5a7bf24fa0822c39617e4ef0a.png

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.