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

I'm having trouble with aligning my input checkbox within the form

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

Secondary menu supersedes primary dropdown menu

Is there a way to extract the "validade" value from the array and retrieve it exclusively?

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Achieving 100% height with Flexbox in CSS

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Mastering the art of integrating two applications in Django involves understanding how to properly

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery

"Discrepancy between default checkbox and its current state

What is the best way to pass card data between Vue.js components?

Changing the text during a reset process

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?

Discover the magic of using Polymer core-animated-pages transitions to create a stunning tile-cascade effect for your custom elements!

What is the best way to add animation to switch between table rows?

Change the body selector in CssResource to apply custom styles

What causes CSS animations to suddenly halt?

What are the steps for encoding a value using jquery serialize?

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread