Premuto <button> CSS

Vorrei creare un pulsante che cambi lo stile quando viene premuto. Questo è il mio codice CSS:Premuto <button> CSS

button { 
 
    font-size: 18px; 
 
    border: 2px solid gray; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
button:active { 
 
    font-size: 18px; 
 
    border: 2px solid red; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<button>Button</button>

è cambiato solo quando clicco & presa su di esso. Voglio farlo cambiare stile dopo che è stato premuto. Ad esempio, lo stato normale sarebbe bianco, lo stato mentre veniva cliccato sarebbe verde e dopo che il clic è stato rilasciato sarebbe rosso.

fonte

2013-03-17 Kyrbi

Stai andando a dover aggiungere qualche JavaScript. – MattDiamant

Anche se questo è molto possibile usando i CSS, questo non è ciò che il CSS è stato progettato per fare. Si consideri JavaScript –

Eventuale duplicato http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-it-has-been-clicked –

È possibile farlo se si utilizza un tag <a> al posto di un tasto. So che non è esattamente quello che hai chiesto, ma potrebbe darvi alcune altre opzioni se non riesci a trovare una soluzione a questo:

Prendendo in prestito da una demo da un'altra risposta qui ho prodotto questo:

a { 
 
    display: block; 
 
    font-size: 18px; 
 
    border: 2px solid gray; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
} 
 

 
a:active { 
 
    font-size: 18px; 
 
    border: 2px solid green; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
a:target { 
 
    font-size: 18px; 
 
    border: 2px solid red; 
 
    border-radius: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<a id="btn" href="#btn">Demo</a>

Avviso l'uso di :target; questo sarà lo stile applicato quando l'elemento viene preso di mira tramite l'hash. Il che significa anche che il tuo HTML dovrà essere questo: <a id="btn" href="#btn">Demo</a> un link che si autodefinisce. e la demo http://jsfiddle.net/rlemon/Awdq5/4/

Grazie alla @BenjaminGruenbaum ecco un meglio demo: http://jsfiddle.net/agzVt/

_{Inoltre, come nota in calce: questo in realtà dovrebbe essere fatto con JavaScript e l'applicazione/rimozione di classi CSS dall'elemento. Sarebbe molto meno complicato.}

fonte

2013-03-17 17:43:56 rlemon

+1 Una soluzione corretta. Ecco un violino che penso meglio illustra questa soluzione http://jsfiddle.net/agzVt/ –

Ecco una demo ripulita che aggiunge l'effetto hover pure http://jsfiddle.net/KyleMit/agzVt/153/ – KyleMit

È un po 'hacky però non è vero? Non esiste un modo (non JS) per un pulsante di abbandonare semplicemente l'attivazione al completamento del clic? –

È possibile utilizzare :focus che rimarrà lo stile finché l'utente non fa clic altrove.

button:active { 
    border: 2px solid green; 
} 

button:focus { 
    border: 2px solid red; 
}

fonte

2013-03-17 17:32:22

Questa non è una buona soluzione, non è quello che sta chiedendo di fare, uno Il modo CSS è usare il: selettore selezionato e usare una casella di controllo –

@BenjaminGruenbaum Questo è un buon punto: i pulsanti non sono realmente progettati per essere commutabili. –

È possibile farlo con php se il pulsante apre una nuova pagina.

Ad esempio se il pulsante si collega a una pagina denominata pagename.php come, url: www.website.com/pagename.php il pulsante rimarrà rosso finché rimarrai su quella pagina.

mi è esplosa l'url da '/' un qualcosa di simile ottenuto:

url [0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'])+1,strlen($_SERVER['REQUEST_URI']))); ?> 


<html> 
<head> 
    <style> 
    .btn{ 
    background:white; 
    } 
    .btn:hover, 
    .btn-on{ 
    background:red; 
    } 
    </style> 
</head> 
<body> 
    <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a> 
</body> 
</html>

nota: Non ho provato questo codice. Potrebbe aver bisogno di aggiustamenti.

fonte

2013-07-19 00:46:36

Si noti che l'ancoraggio avrà entrambe le classi quando si fa clic o si ha il passaggio del mouse e btn-on è quello che dice come in base alle regole di cascate poiché viene echeggiato dopo la classe btn. –

Dovremmo includere un piccolo JS? Perché il CSS non è stato fondamentalmente creato per questo lavoro. Il CSS era solo un foglio di stile per aggiungere stili all'HTML, ma le sue pseudo classi possono fare qualcosa che il CSS di base non può fare. Ad esempio button:active attivo è pseudo.

Riferimento:

http://css-tricks.com/pseudo-class-selectors/ È possibile saperne di più su pseudo qui!

tuo codice:

Il codice che si sta avendo la base, ma disponibile. E sì :active si verificherà solo dopo l'attivazione dell'evento click.

button { 
font-size: 18px; 
border: 2px solid gray; 
border-radius: 100px; 
width: 100px; 
height: 100px; 
} 

button:active { 
font-size: 18px; 
border: 2px solid red; 
border-radius: 100px; 
width: 100px; 
height: 100px; 
}

Questo è ciò che i CSS avrebbe fatto, ciò che rlemon suggerito è buono, ma che avrebbe come ha suggerito richiederebbe a tag.

come usare i CSS:

È possibile utilizzare :focus troppo. :focus funzionerebbe una volta fatto il clic e rimarrà fino a quando non clicchi da qualche altra parte, questo era il CSS, stavi cercando di usare CSS, quindi usa :focus per far cambiare i pulsanti.

Cosa JS farebbe:

libreria jQuery del JavaScript sta per aiutarci per questo codice. Ecco l'esempio:

$('button').click(function() { 
    $(this).css('border', '1px solid red'); 
}

Questo farà in modo che il pulsante rimane rossa anche se il clic esce. Per cambiare il tipo di messa a fuoco (per cambiare il colore di rosso per altri) è possibile utilizzare questo:

$('button').click(function() { 
    $(this).css('border', '1px solid red'); 
    // find any other button with a specific id, and change it back to white like 
    $('button#red').css('border', '1px solid white'); 
}

In questo modo, si creerà un menu di navigazione. Che cambierà automaticamente il colore delle schede mentre fai clic su di esse. :)

Spero che tu abbia la risposta. In bocca al lupo! Saluti.

fonte

2013-09-24 15:52:04

Premuto <button> CSS

risposta

Problemi correlati