CSS: Circle background on hover

by lasha

HTML

<div class="button v1"><span>Circle BG Here</span></div>

<div class="button v2"><span>Circle BG Here</span></div>

<div class="button v3"><span>Circle BG Here</span></div>

CSS

.button {
    position: absolute;
    top: 100px;
    left: 100px;
    /* border: 1px solid #000; */
    width: 100px;
    transition: color 0.2s linear;
    -webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
    backface-visibility:hidden;
}
.button.v2 {
    left: 300px;
}
.button.v3 {
    left: 500px;
}
.button:hover {
    color: #fff;
}
.button:hover span {
    position: relative;
    z-index: 10;
}
.button:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    top: -85px;
    left: -50px;
    background-color: #000;
    border-radius: 100%;
    pointer-events: none;
    transition: opacity 0.2s linear;
    opacity: 0;
}
.button:hover:before {
    opacity: 1;
}