Html Question posted in
Some basic documentation can be found here.

Html – Backlighting a button on a website in mobile emulation

When you click on a button in the mobile browser emulation, the button remains highlighted.

When you click on a button On the desktop version of the browser, everything works correctly.

How to fix this?

.button-coontainer {
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
}

.btn-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-link:hover {
    background-color: #0056b3;
}

.btn-link:active {
    background-color: #004080;
    transform: translateY(2px);
}
<div class="button-coontainer">
    <a class="btn-link" style="-webkit-tap-highlight-color: transparent;">
        My button
    </a>
</div>
Tags:

2

Answers


  1. 0

    This is used for giving the website visitor a visual feedback, in mobile devices it is a useful thing to not remove.

    Basically, it is a feature to show the user that the button is clicked, which removing wouldn’t be good.

    But if you’re willing to remove it still, you can use this CSS code:

    .btn-link {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-link:focus {
    outline: none;
}

    This will help with removing the highlight issue you’re having.

    Login or Signup to reply.
  2. 0

    On mobile, it works similarly to hover when the touch starts.

    There is a way to adjust it to the viewport size, but It is desirable to show the behavior to the user.

    • The code below changes hover color as intended in PC width
    • When clicked on mobile, it is not fixed with hover color and maintains the existing button color.
    .button-coontainer {
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
}

.btn-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-link:hover {
    background-color: #0056b3;
}

.btn-link:active {
    background-color: #004080;
    transform: translateY(2px);
}

@media screen and (max-width: 768px) {
  .btn-link:hover {
    background-color: #007bff;
  }
}
    <div class="button-coontainer">
    <a class="btn-link" style="-webkit-tap-highlight-color: transparent;">
        My button
    </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search