그라데이션, 마우스오버효과

<div>
  <button></button>
</div>

 

 

CSS

 

 

 

 

 

 

div {
 width: 320px;
 max-width: 100%;
 margin: 0 auto;
 padding: 2rem;
}
button {
 width: 320px;
 max-width: 100%;
 height: 240px;
 margin: 0 auto;
 background-image: linear-gradient(#df3b65, #2B2E4A);
 background-size: auto 200%;
 background-position: 0 100%;
 transition: background-position 0.5s;
 border: none;
 outline: none;
}
button:hover {
 background-position: 0 0;
}