Green Upside Down Button Animation With Code

 
.greenflip {
    margin-top: 1em;
    width: 30%;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    background-color: #cccccc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 4px solid #009900;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.7s;
}


.greenflip:hover {
  background-color: #009900;
  transform: rotate(360deg) scaleX(-1);
}


 HTML BELOW ↓ 



<p class="greenflip"> Hello World! </p>

Button Animations CSS (w/ code)

Green Upside Down Button Animation With Code CSS