Ayan Ayan - 1 month ago 9
CSS Question

Pressed in buttons using CSS3 animation

I am trying to make a bevel looking button as pressed in on active state. I want the transition to be smooth enough but the problem is I don't know how to bring that smoothness. What I have achieved is the following.



.button {
background-color: #ff962c;
border-radius: 10px;
width: 25%;
text-align: center;
color: #FFFFFF;
padding: 10px;
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
font-size: 20px;
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);

}
.button:active {
border: 1px solid #ff962c;
background-color: #ffa346;
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4);
}
.button:hover {
background-color: #ffa346;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
<a href="" id="upload" class="button">
<i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i>
</a>

<a href="" id="view" class="button">
<i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i>
</a>




Answer

You can add css transitions. To be exact: transition: box-shadow .2s ease-in-out;. I recommend changing only specific properties with transitions, especially if we are talking about box-shadows and other such heavy effects.

.button {
  background-color: #ff962c;
  border-radius: 10px;
  width: 25%;
  text-align: center;
  color: #FFFFFF;
  padding: 10px;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  font-size: 20px;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
  transition: box-shadow .2s ease-in-out;
}
.button:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .8), inset -1px -1px 1px rgba(255, 255, 255, .4);
}
.button:hover {
  background-color: #ffa346;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
<a href="" id="upload" class="button">
  <i class="fa fa-cloud-upload fa-lg fa-align-center" aria-hidden="true"></i>
</a>

<a href="" id="view" class="button">
  <i class="fa fa-eye fa-lg fa-align-center" aria-hidden="true"></i>
</a>