1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Button Changing Colour

Discussion in 'Web Design & Development' started by Dingus, Sep 24, 2018.

Advertisement
  1. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,140
    I’ve made a button on my site for an email link. On a PC it works as it should. It changes colour when the mouse is hovered over it, then reverts when the mouse is moved away, but on an iPhone or similar the colour doesn’t revert.
    Does anyone know of a fix?
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,203
    First Name:
    Colin
    What is your CSS code? With it we may be able to give you some clues.
     
  3. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,140
    The hover css:
    .button:hover {
    background-color: #FF0000;
    color: #BCB9B9;
    cursor: pointer;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    }
    and the button itself:
    .button {
    width: 440px;
    margin-top: 12px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    text-align: center;
    vertical-align: middle;
    border-radius: 80px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 6px;
    border: 1px solid #FFFFFF;
    transition: all 0.83s linear;
    }
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,203
    First Name:
    Colin
    Nothing looks wrong with your CSS.

    A Google search turned up this article which covers the problem and it is an issue with all touch screen devices
     
  5. Dingus

    Dingus Thread Starter

    Joined:
    Apr 21, 2002
    Messages:
    1,140
    I think this guy has nailed it by the sounds of it. Now to see if I can impliment it. Being a novice !!!!

    var isTouch = !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

    if( !isTouch ){
    // add class which defines hover behavior
    }
     
    colinsp likes this.
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1216974

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice