按钮 - 带有悬停和单击效果的单个按钮，带有图标

Question

我怎样才能为单个按钮做两种效果。您可以从下面的链接中获取示例。

我只想在“悬停并单击”时更改图标信封效果

1. 悬停图标应该改变它的效果，你可以在页面底部看到绿色的效果。

2. 当点击同一个按钮时，图标应该会改变它的效果，就像购物车移动的按钮一样。

jsfiddler 将不胜感激。

感谢提醒

example link

Answer 1

您可以使用此代码

$("button").mousedown(function(){
    $(this).css("background-color", "#B8A3C1");
});
$(document).mouseup(function(){
    $("button").css("background-color", "#823aa0");
});

button {
    width: 250px;
    height: 70px;
    position: relative;
    background: #823aa0;
    border: none;   
    color: #fff;
    overflow: hidden;
    transition: all 1s; 
    outline: none;
}

button:before,
button:after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    transition: all 0.3s;
    line-height: 65px;
}

button:before {
    content: "\2663";     
    top: -70px;
    font-size: 50px;  
}

button:hover:before { top: 0px; }

button:after {
    content: "Click";
    top: 0px;
    font-size: 30px;  
}

button:hover:after { top: 70px; } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button></button>