CSS3アニメーションを使用しているボタンを押してください

Question

私は、アクティブ状態で押し込まれたベベルルッキングボタンを作成しようとしています。私は移行が十分に滑らかになることを望みますが、問題はその滑らかさをもたらす方法を知らないことです。私が達成したことは次のとおりです。

.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 1

あなたは、CSSのトランジションを追加することができます。正確には：transition: box-shadow .2s ease-in-out;です。特にボックスシャドウやその他の重いエフェクトについて言えば、特定のプロパティのみをトランジションで変更することをお勧めします。

.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>

Answer 2

あなたは単にtransitionsを使用して、このように意味しますか？
は、それが役に立つかもしれない、あまりにもこのリンクを見てください：hover.css

.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); 
 
    -webkit-transition: all .1s ease; 
 
    -moz-transition: all .1s ease; 
 
    -o-transition: all .1s ease; 
 
    transition: all .1s ease; 
 
} 
 
.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 3

CSSトランジションを見てください、この1

.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); 
 
    -webkit-transition: all .1s ease; 
 
    -moz-transition: all .1s ease; 
 
    -o-transition: all .1s ease; 
 
    transition: all .1s ease; 
 
} 
 
.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>