JSFiddle - React, Tailwind, and code Playground

by Francisco Presencia Fandos

HTML

<a class="favourite">★</a>
<a class="deleteme">✖</a>

CSS

.favourite,
.deleteme {
    display: block;
    font-size: 40px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-left: calc(33vw - 25px);
    margin-top: calc(50vh - 25px);
    float: left;
    text-align: center;
    color: #666;
    border-radius: 100em;
    border: 2px solid #666;
    cursor: pointer;
}

.favourite {
    transition: 
        transform 1s ease 1s,
        /* The billion second hack */
        color 0s 1000000000s;
}

.favourite:active {
    color: #F00;
    transform: rotateZ(360deg);
    transition: all 0s ease 0s;
}

.deleteme {
    margin-left: calc(33vw - 75px);
    overflow: hidden;
    transition:
        /* The billion second hack */
        width 0s 1000000000s,
        height 0s 1000000000s,
        border 0s 1000000000s;
}

.deleteme:active {
    width: 0;
    height: 0;
    border: 0;
    transition: all 0s;
}

JavaScript

/*

The billion second hack - A neat CSS3 hack

Normally, to change the color when an element is clicked you'd use javascript or a shady combination of hidden checkboxes and "~" css selectors.

However, if you just want to change the visuals of the elements, you can get away with this neat hack. Change the property you want with the ":active" pseudo selector, then asign to the original one a "transition: PROPERTY 0s 1000000000s". This way a billion seconds - 31 years -  would have to pass for it to revert to the original state.

You can even delete elements with this hack as can be seen with the "x" example on the right.

By Francisco Presencia Fandos for you to use under the MIT License

Enjoy

*/