Elementor button toont vreemde aanraakkleur op iPad/iPhone

Probleem:

Elementor button transition effect zorgt voor vreemde hover kleuren op responsive apparaten zoals iPads en iPhones.Je hebt in WordPress met Elementor een pagina voorzien van Button widgets om bezoekers door te sturen naar andere pagina’s.

Om deze visueel wat mooier te maken hebben ze standaard een rode achtergrond met zwarte tekst. Raak je de knoppen met de muis aan dan krijgen deze een gele achtergrond met zwarte tekst. Het hover effect. Voor de overgang maakt Elementor gebruik van de CSS transition property zodat de overgang van rood naar geel heel soepel verloopt. Het lijkt net of deze in 1 seconden van kleur vervaagd.

Bezoek je dezelfde pagina op jouw iPad of iPhone en raak je een van de knoppen aan (hover effect), dan gaat de knop van rood > oranje > geel. Deze overgang gaat niet soepel maar heel schokkerig en ziet er niet mooi uit.

Oplossing:

Het CSS transistion effect dat hier wordt gebruikt wordt niet goed ondersteund door een iPad of iPhone. Het maakt niet uit of je dit in Safari of Chrome gebruikt. De oranje kleur wordt veroorzaakt door de standaardkleur te mengen met de kleur die getoond moet worden als je de knop aanraakt. Rood + geel maakt oranje.

Je kan natuurlijk het CSS transition effect helemaal niet gebruiken door dit in Elementor bij elke knop te verwijderen. Maar je kan het effect ook op kleinere schermen verwijderen op basis van de schermafmetingen.

Voeg onderstaande CSS code toe aan het “style.css” bestand van jouw thema. Heb je een thema gekocht of gedownload via WordPress.org? Dan gebruik je een Child theme of het CSS veld in de WordPress customizer.

@media screen and (max-width: 1100px) { 
   .elementor-button { 
      transition: none !important; 
      -webkit-transition: none !important; 
      -o-transition: none !important; 
   } 
} 

Oplossing getest op:

WordPress 6.1.1 met Elementor 3.9.0 en Elementor Pro 3.9.0

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.