JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    <input id="favorite" name="favorite" type="checkbox" checked="" />
    <span id="favorite-button"></span>
    <span id="favorite-title">Добавить в избранное</span>
</label>

CSS

body {
    margin : 0;
    padding: 0;
    background-color: #23232b;
    overflow-x: hidden;
    font-family: Segoe UI, 'Open Sans', sans-serif;
    text-align: center;
}

#favorite{
    display: none;
}
#favorite-title{
    display: none;
}
#favorite + #favorite-button {
    display: inline-block;
    position: relative;
    font-family: "icons";
    font-size: 60px;
    height: 150px;
    width: 150px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 147px;
    cursor: pointer;
    margin: 0 auto;
    top: calc(50% - 75px);
    transition: 150ms;
}
#favorite:active + #favorite-button {transform: scale(.94, .94)}
  
#favorite + #favorite-button{background-color: #4488d4}
#favorite + #favorite-button:hover {background-color: #3c77ba}
#favorite + #favorite-button:before  {content: "\2764"}
    
#favorite:checked + #favorite-button{background-color: #27a753}
#favorite:checked + #favorite-button:hover{background-color: #1f8e45}
#favorite:checked + #favorite-button:before {content: "\2713"}

JavaScript

favorite.onchange = function() {
    alert(["Удалено из избранного", "Добавлено в избранное"][this.checked|0]);
};