JSFiddle - React, Tailwind, and code Playground
HTML
<button class="mybutton" id="doSearch">
Search
</button>
CSS
.mybutton {
color:red;
padding:15px 50px;
border:1px solid #999 ;
border-radius:3px;
}
.load_IT::after {
content: 'Caricamento...';
-o-animation: bookingBlink 1s linear infinite;
-ms-animation: bookingBlink 1s linear infinite;
-moz-animation: bookingBlink 1s linear infinite;
-webkit-animation: bookingBlink 1s linear infinite;
top: 8px;
}
.load_EN::after {
content: 'Loading...';
-o-animation: bookingBlink 1s linear infinite;
-ms-animation: bookingBlink 1s linear infinite;
-moz-animation: bookingBlink 1s linear infinite;
-webkit-animation: bookingBlink 1s linear infinite;
top: 8px;
}
@keyframes bookingBlink {
0%,
100% {
opacity: 1
}
50% {
opacity: .3
}
}
@-webkit-keyframes bookingBlink {
0%,
100% {
opacity: 1
}
50% {
opacity: .3
}
}
JavaScript
$("#doSearch").click(function() {
$("#doSearch").html( "" );
$("#doSearch").last().addClass( "load_IT" );
});