What is the best way to create a seamless background transition for buttons on a mobile device?

Question

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using:

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: .5s ;
}

#loadQuote:active {
  background-color: rgba(255,255,255,.25);
  -webkit-transition: background-color 10ms linear;
     -ms-transition: background-color 10ms linear;
     transition: background-color 10ms linear;
}

I tested this on the Google Chrome emulator and it worked correctly. However, when I tried it on my iPhone, the effect did not work as expected. I am unsure why this is happening. Additionally, it was strange that when I initially set the transition duration to 1000ms, the background changed very quickly. But when I reduced it to 10ms, the change was slower and more noticeable. This puzzled me, as I would expect longer durations to result in longer animations.

If you want to see the live demo of the project, you can visit .

Thank you!

html css frontend

Answer 1

Answer №1

There are a couple of reasons why your transition might not work consistently:

a) Your transitions are only defined for the :active state of the element, so they will only apply when the element is in that specific state. If it's not in that state, the transition won't occur.

b) It's not recommended to rely on :active for mobile devices. It's better practice to add and remove a class instead. Set the transitions on the base element without a class, and use a class to control the on/off state.

To illustrate this point, I've included some JavaScript code below. However, if you're already familiar with JavaScript, you can ignore it.

let lQ = document.querySelector('#loadQuote');

lQ.addEventListener('click', activatelQ);
lQ.addEventListener('tap', activatelQ);

function activatelQ() {
  lQ.classList.add('active');
  deactivatelQ();
}

function deactivatelQ() {
  setTimeout(function(){
    lQ.classList.remove('active')
  },731)
}

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: background-color .5s linear;

  text-align: center;
  cursor: pointer;
}

#loadQuote.active {
  background-color: rgba(255,255,255,.25);
}

<div id="loadQuote">Some quote</div>

Based on your website, I noticed you're using jQuery. In that case, you can make the following adjustments to your jQuery code instead of using the provided JavaScript:

Replace
```
$('#loadQuote').click(generateQuote);
```
with

 $('#loadQuote').on('click tap', function(){
   $(this).addClass('active');
   generateQuote()
 }

Add this line inside your renderQuote() function:

$('#loadQuote').removeClass('active');

On a different note, for future reference, try to include a minimal, complete, and verifiable example within your question. Providing this information upfront helps answerers respond more effectively and keeps your question relevant for other users over time. Additionally, including this information reduces the need for others to visit your website for context. Remember, helping others by creating clear and concise questions can lead to better assistance for yourself.

Answer 2

There are a couple of reasons why your transition might not work consistently:

a) Your transitions are only defined for the :active state of the element, so they will only apply when the element is in that specific state. If it's not in that state, the transition won't occur.

b) It's not recommended to rely on :active for mobile devices. It's better practice to add and remove a class instead. Set the transitions on the base element without a class, and use a class to control the on/off state.

To illustrate this point, I've included some JavaScript code below. However, if you're already familiar with JavaScript, you can ignore it.

let lQ = document.querySelector('#loadQuote');

lQ.addEventListener('click', activatelQ);
lQ.addEventListener('tap', activatelQ);

function activatelQ() {
  lQ.classList.add('active');
  deactivatelQ();
}

function deactivatelQ() {
  setTimeout(function(){
    lQ.classList.remove('active')
  },731)
}

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: background-color .5s linear;

  text-align: center;
  cursor: pointer;
}

#loadQuote.active {
  background-color: rgba(255,255,255,.25);
}

<div id="loadQuote">Some quote</div>

Based on your website, I noticed you're using jQuery. In that case, you can make the following adjustments to your jQuery code instead of using the provided JavaScript:

Replace
```
$('#loadQuote').click(generateQuote);
```
with

 $('#loadQuote').on('click tap', function(){
   $(this).addClass('active');
   generateQuote()
 }

Add this line inside your renderQuote() function:

$('#loadQuote').removeClass('active');

On a different note, for future reference, try to include a minimal, complete, and verifiable example within your question. Providing this information upfront helps answerers respond more effectively and keeps your question relevant for other users over time. Additionally, including this information reduces the need for others to visit your website for context. Remember, helping others by creating clear and concise questions can lead to better assistance for yourself.

What is the best way to create a seamless background transition for buttons on a mobile device?

Answer №1

Similar questions

What is the method for including a TabIndex property in a JSON file?

Hide Bootstrap columns for Printing

Enhancing Next.js Images with Custom CSS Styles

Incorporating Bootstrap's Inline Design Elements

activate a "toggle" that allows selection of specific components to show

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

Craft a unique parallax effect using Framer Motion's clipping feature

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

Creating a stationary div element solely with Javascript, excluding the use of CSS, jQuery, and HTML

Organizing DIVs upon website initialization

Is it advisable to opt for window.webkitRequestAnimationFrame over setInterval?

Need help using JQuery to set the focus on the initial <select> element on a webpage?

A time-tracking counter that tallies the amount of time users spend on the webpage

Fill an HTML table with comma-separated values (CSV) information

repeating the identical content in the same setting

The TreeView control displays as a <div> element, which results in an unexpected line break

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

Exploring CSS Outlining in Visual Studio 2013

Distinguishing Font Sizes in Safari Compared to UIWebView