scritta sopra a cerchio:hover

[scartus]

scritta sopra a cerchio:hover

Salve a tutti, ho un menu e vorrei che al passaggio del mouse, dietro mi compaia un cerchio interno.

Cioè la scritta esce fuori dal cerchio. ho provato a mettere un bordo alla scritta e metterci il border radius di un cerchio, ma questo si ovalizza e si adatta alla scritta. come posso fare?

è il dodicesimo effetto in questa demo:
tympanus.net/Development/CreativeLinkEffects/

[miwebdesign]

Ciao scartus,

.btn-circled:hover::before, .btn-circled:hover::after, .btn-circled:focus::before, .btn-circled:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}
.btn-circled::before, .btn-circled::after {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    content: "";
    height: 100px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.2);
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    width: 100px;
}
.btn-circled:hover::before, .btn-circled:hover::after, .btn-circled:focus::before, .btn-circled:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}
.btn-circled::after {
    border-width: 6px;
    height: 90px;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    width: 90px;
}
.btn-circled::before, .btn-circled::after {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    content: "";
    height: 100px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.2);
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    width: 100px;
}
.btn-circled {
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

Copia questo CSS ed aggiungi la classe btn-circled nei tuoi link, oppure adattalo come meglio credi.