JSFiddle - React, Tailwind, and code Playground

by Osman Cea

HTML

<script src="https://use.fontawesome.com/353bc64522.js"></script>

<div id="transDemo2">
  <div class="hover">
      <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true"></i>
      </div>
</div>

CSS

.MsgBtnIcon {
  position: fixed;
    bottom: 0px;
    right:  7px;
    padding: 0px; 

}
#transDemo2 div {
  display: block;
    position: fixed;
    bottom: 0px;
    right: 0px; 
    background-color: #03A9F4;
    width: 75px;
    height: 75px;
  text-align:center;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

}

#transDemo2 div:hover, #transDemo2 div.hover_effect {
  -webkit-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  -moz-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  -ms-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
}