+ Rispondi alla Discussione
Risultati da 1 a 2 di 2

scritta sopra a cerchio:hover

Ultimo Messaggio di MiWebDesign il:
  1. #1
    User
    Data Registrazione
    Sep 2015
    Località
    Roma
    Messaggi
    20

    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/

  2. #2
    Moderatore L'avatar di MiWebDesign
    Data Registrazione
    May 2015
    Località
    Palermo
    Messaggi
    198
    Segui MiWebDesign su Twitter Aggiungi MiWebDesign su Google+ Aggiungi MiWebDesign su Facebook Aggiungi MiWebDesign su Linkedin
    Ciao scartus,

    Codice:
    .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.

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.