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;
}