User:Just Some Guy in a Nutshell/common.css

/*Don't use these codes or else it will be considerd plagrism*/ /*card*/ .Card{ position:relative; text-align:center; width:280px; height:300px; border-radius:74% 82% 70% 88%; display:table; padding:20px; background-color:rgba(255,255,255,.9); cursor:pointer; z-index:1; transition:.5s; color:#227093; } .Card:before, .Card:after{ content:''; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; animation:RotateDiv 5s linear infinite; } .Card:before{ border-radius:130% 151% 189% 166%; background-color:rgba(255,255,255,.7); animation-delay:0s; transition:.5s; } .Card:after{ border-radius:145% 86% 80% 90%; background-color:rgba(255,255,255,.3); animation-delay:.2s; transition:.5s; } .Card:hover{ background-color:rgba(9,113,195,.8); color:#fff; } .Card:hover:after{ background-color: rgba(9,113,195,.7); } .Card:hover:before{ background-color: rgba(9,113,195,.3); } .Card div{ display:table-cell; vertical-align:middle; } .Card div h2{ font-size:25px; } .Card div p{	margin-top:20px; font-size:18px; } @keyframes RotateDiv{ 0%{		transform:rotate(0deg); }	100%{		transform:rotate(360deg); } } /*btn*/ .btn-grad {background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0  100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }

.btn-grad:hover { background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none; }