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

Html – Transition not working on hover but other changes do

I’m working on updating button styles for my company’s site. I’ve applied my CSS changes but the transition that has worked on other sites will not work on this site. When inspecting using Dev Tools in both Edge and Chrome I can see my CSS stylings are being applied. If I add an additional property to hover, say color: black;, hovering over the button shows the text color change properly but the scale still does not happen.

.btn {
  border: 2px solid;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  font-family: Gotham, Arial, sans-serif;
  text-decoration: none !important;
  text-shadow: none;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  text-transform: uppercase;
  min-height: 35px;
  padding: 8px 15px 5px 15px;
  line-height: 35px;
  cursor: pointer;
  transition: transform .2s;
}

.btn-default {
  border-color: #006c9d;
  color: #ffffff;
  background-color: #006c9d;
}

.btn-default:hover {
  transform: scale(1.05);
}
<p align="center">
      <a class=" btn btn-default " title="Internet Services " href="redacted ">CONNECT</a>
    </p>

I have tried applying other classes with the scale transition working properly to no avail. I have also tried changing the CSS to:

.btn {
    border: 2px solid;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    font-family: Gotham, Arial, sans-serif;
    text-decoration: none !important;
    text-shadow: none;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    text-transform: uppercase;
    min-height: 35px;
    padding: 8px 15px 5px 15px;
    line-height: 35px;
    cursor: pointer;
    scale: 1;
    transition: all .2s;
}

.btn-default {
    border-color: #006c9d;
    color: #ffffff;
    background-color: #006c9d;
    transition: all .2s;
}

    .btn-default:hover {
        scale: 1.05;
    }

Nothing different happens with these changes either. I can also add the property color: black; to the hover in Dev Tools and the text color changes but the scale does not.

Tags:

2

Answers


  1. 0

    Your < p > element has a typo, missing ". When you solve this one, try to add this property to the a element:

    display:inline-block;

    Login or Signup to reply.
  2. 0

    You need to set the display of your button to something other than its inline default, like inline-block.

    .btn {
  border: 2px solid;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  font-family: Gotham, Arial, sans-serif;
  text-decoration: none !important;
  text-shadow: none;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  text-transform: uppercase;
  min-height: 35px;
  padding: 8px 15px 5px 15px;
  line-height: 35px;
  cursor: pointer;
  transition: transform .2s;
  display:inline-block;
}

.btn-default {
  border-color: #006c9d;
  color: #ffffff;
  background-color: #006c9d;
}

.btn-default:hover {
  transform: scale(1.05);
}
    <p align="center">
      <a class=" btn btn-default " title="Internet Services " href="redacted ">CONNECT</a>
    </p>

    See also CSS transform doesn't work on inline elements

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search