Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Button & Transform: Scale

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #250686
    justcodeit
    Participant

    https://jsfiddle.net/0d0Laa8a/1/

    What can be done for the font and box shadow to scale seamlessly with the button when it is held down?

    1) When the button is clicked (and held) on it looks like the font shrinks and then reconstitutes itself by its default size or close to it.

    2) The box shadow does something similar. Best way I can describe is that it shrinks but then does some sort of subtle jump that pops out.

    <p>Button</p>
    
    p {
      margin: 70px auto;
      width: 30%;
      line-height: 2.75;
      border: 4px solid salmon;
      text-align: center;
      transition-property: transform, box-shadow;
      transition-duration: .6s;
      background: red;
    }
    
    p,
    p:hover {
      cursor: pointer;
    }
    
    p:active {
      font-size: 1rem;
      transform: scale(.9);
      box-shadow: 0 3px 15px -2px;
    }
    
    #250689
    Atelierbram
    Participant

    Tried something with a few needed extra added elements. May not be want you are after, but I do think the box-shadow looks a bit nicer on the transition there. Don’t know what to do about the text. Guess that is the browser recalculating the anti-aliasing on the font or something.

    http://codepen.io/atelierbram/pen/WRXBgW

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.