JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dealList"><a href="#" title="View Deal" class="viewDeal"><span>&nbsp;</span>View</a></div>

CSS

.dealList .viewDeal{
    display: inline-block; font: normal 13px 'Ubuntu', sans-serif; color:#c92329;overflow: hidden;padding: 0;width: 14px;height: 14px;}
.dealList .viewDeal:hover{
    -webkit-animation-name: expand;
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: expand; 
    -moz-animation-duration: 1s; 
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}
.dealList .viewDeal span{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(http://iseofirm.net/groupclone/gpc10600/skin/frontend/default/greentheme/images/star_view.png) no-repeat;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}
.dealList .viewDeal:hover span{
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes expand {
    from {width: 14px;}
    to {width: 80px;}
}

@-moz-keyframes expand {
    from {width: 14px;}
    to {width: 80px;}
}