610 messaggi dal 11 febbraio 2013
Scusate ma non trovo una soluzione :

vorrei che al click di un input button il contenuto della pseudo classe ::after sia visibile
.btn{
    position:relative; 
    ...
    transition: all .3s;
    
    &:active,
    &:focus{
       outline:none; 
       transform:translateY(-.1rem);
       @include shadow-light;
       
       &:after{      //qui il problema!!! almeno credo *******************
          transform:scaleX(1.4) scaleY(1.6);
          opacity:1;
       }
    }
    
    &--gold{
        background-color:darkgoldenrod;
        color:white;
        border:2px solid goldenrod;

         &:hover{
             background-color:white;
             color:darkgoldenrod;
             border:2px solid goldenrod;
         }

         &::after{
             background-color:#efefe7;
         }
    }


  &::after {
    content:"";
    display:inline-block;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    opacity:0;
    transition:all .3s;
  }


al click vorrei che il contenuto di after (background-color:#efefe7;) aumentasse...

cosa sbaglio?
10.683 messaggi dal 09 febbraio 2002
Contributi
Boh, a me sembra che funzioni, vedi il fiddle.
https://jsfiddle.net/w3vdzaj9/

Puoi postare uno screenshot dell'effetto voluto?

ciao,
Moreno
Modificato da BrightSoul il 22 maggio 2018 20.57 -

Enjoy learning and just keep making
610 messaggi dal 11 febbraio 2013
Si l'effetto e quello...mettero dei gradienti per renderlo piu carino

Ma mi sono accorto che con un input type button non va

Ho provato sul tuo fiddle
10.683 messaggi dal 09 febbraio 2002
Contributi
Certo, il tag input non è un tag contenitore. L'::after non va.

Enjoy learning and just keep making
610 messaggi dal 11 febbraio 2013
A ecco

Ma ho letto che e meglio usare input invece che button...

Misa che cambio effetto

Grazie
10.683 messaggi dal 09 febbraio 2002
Contributi

Ma ho letto che e meglio usare input invece che button...

Ah, puoi linkare l'articolo?

Enjoy learning and just keep making
610 messaggi dal 11 febbraio 2013
Scusa non ricordo
Solo si suggeriva input per compatibilita su tutti i browser e dispositivi

Dici che mi sbaglio?

Se mi dai l ok metto il button senza pensarci :)
Modificato da jjchuck il 22 maggio 2018 21.47 -
10.683 messaggi dal 09 febbraio 2002
Contributi
Mah, forse c'erano stati problemi con IE6 tipo questo ma parliamo di roba vecchia di 10 anni.
Ormai penso che puoi usare <button> senza nessun problema. Devi solo tenere conto che per default causa il submit del form e, se non vuoi che accada, devi aggiungere l'attributo type="button".

Enjoy learning and just keep making

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.