Presionado CSS

Me gustaría crear un botón que lo cambie de estilo cuando se presione. Este es mi código 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; } 
  

Se cambia solo cuando hago clic y lo sostengo. Quiero que cambie de estilo después de presionarlo. Por ejemplo, el estado normal sería blanco, el estado mientras se hace clic sería verde y luego de que se haga clic se volvería rojo.

Puede hacer esto si usa una etiqueta lugar de un botón. Sé que no es exactamente lo que pediste, pero podría darte otras opciones si no puedes encontrar una solución a esto:

Tomando prestado de una demostración de otra respuesta aquí produje esto:

 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; } 
 Demo 

Podrías usar :focus que seguirá siendo el estilo siempre y cuando el usuario no haga clic en otro lugar.

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

¿Deberíamos incluir un poco de JS? Porque CSS no fue creado básicamente para este trabajo. CSS era solo una hoja de estilo para agregar estilos al HTML, pero sus pseudo clases pueden hacer algo que el CSS básico no puede hacer. Por ejemplo, el button:active active is pseudo.

Referencia:

http://css-tricks.com/pseudo-class-selectors/ ¡ Puedes obtener más información sobre pseudo aquí!

Tu codigo:

El código que estás teniendo es básico pero útil. Y sí :active solo ocurrirá una vez que se active el 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; } 

Esto es lo que haría CSS, lo que rlemón sugirió es bueno, pero eso, como él sugirió, requeriría a etiqueta.

Cómo usar CSS:

Puede usar :focus también. :focus funcionaría una vez que se hace clic y se mantendría hasta que haga clic en otro lugar, este era el CSS, usted estaba tratando de usar CSS, entonces use :focus para hacer que los botones cambien.

Lo que JS haría:

La biblioteca jQuery de JavaScript nos va a ayudar con este código. Aquí está el ejemplo:

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

Esto se asegurará de que el botón permanezca rojo incluso si el clic sale. Para cambiar el tipo de enfoque (para cambiar el color de rojo a otro) puede usar esto:

 $('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'); } 

De esta manera, creará un menú de navegación. Lo cual cambiará automáticamente el color de las tabs al hacer clic en ellas. 🙂

Espero que tengas la respuesta. ¡Buena suerte! Aclamaciones.

Puede hacer esto con php si el botón abre una página nueva.

Por ejemplo, si el botón se vincula a una página llamada pagename.php como, url: http://www.website.comhttps://stackoverflow.com/pagename.php, el botón permanecerá en rojo siempre y cuando permanezca en esa página.

Exploté la URL por ‘/’ y obtuve algo así como:

url [0] = pagename.php

       Click Me   

nota: no probé este código. Puede necesitar ajustes.