Gepresste <button> CSS

Ich würde gerne Button erstellen, der es ändert, wenn es gedrückt wird. Das ist mein CSS-Code:Gepresste <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>

Es nur geändert, wenn ich & halten, darauf klicken. Ich möchte, dass es den Stil ändert, nachdem es gedrückt wurde. Zum Beispiel wäre der normale Zustand weiß, der Zustand, in dem geklickt wird, wäre grün und nach dem Loslassen wäre der Zustand rot.

Quelle

2013-03-17 Kyrbi

Sie müssen JavaScript hinzufügen. – MattDiamant

Während dies mit CSS sehr gut möglich ist, wurde CSS dafür nicht entwickelt. Betrachten Sie JavaScript –

Mögliche doppelte http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-it-has-been-geklickt –

Sie können dies tun, wenn Sie einen <a>-Tag statt einer Taste verwenden. Ich weiß, es ist nicht genau das, was Sie gefragt, aber es könnte Ihnen einige andere Optionen geben, wenn Sie keine Lösung für diese finden:

Borrowing aus einem Demo von einer anderen Antwort hier produzierte ich dies:

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>

Beachten Sie die Verwendung von :target; Dies wird der Stil sein, der angewendet wird, wenn das Element über den Hash angesteuert wird. Das bedeutet auch, dass Ihr HTML-Code folgendermaßen aussehen muss: <a id="btn" href="#btn">Demo</a> ein Link, der auf sich selbst ausgerichtet ist. und die Demo http://jsfiddle.net/rlemon/Awdq5/4/

Dank hier @BenjaminGruenbaum ist eine besser Demo: http://jsfiddle.net/agzVt/

_{Auch als Fußnote: Das ist wirklich sollte mit JavaScript gemacht und Anwendung/CSS-Klassen aus dem Elemente zu entfernen. Es wäre viel weniger verschachtelt.}

Quelle

2013-03-17 17:43:56 rlemon

+1 Eine korrekte Lösung. Hier ist eine Geige, die diese Lösung besser veranschaulicht http://jsfiddle.net/agzVt/ –

Hier ist eine aufgeräumte Demo, die den Hover-Effekt auch fügt http://jsfiddle.net/KyleMit/agzVt/153/ – KyleMit

Es ist ein bisschen hacky, oder? Gibt es keine (nicht-JS) Möglichkeit für einen Button, den Fokus auf Klick-Complete einfach aufzugeben? –

Sie könnten :focus verwenden, das bleibt der Stil, solange der Benutzer nicht anderswo klickt.

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

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

Quelle

2013-03-17 17:32:22

Das ist keine gute Lösung, es ist nicht das, was er tun will CSS-Weg ist es, den: Check-Selektor zu verwenden und ein Kontrollkästchen zu verwenden –

@BenjaminGruenbaum Das ist ein guter Punkt - Tasten sind nicht wirklich entworfen, um zu schalten. –

Sie können dies mit PHP tun, wenn die Schaltfläche eine neue Seite öffnet.

Zum Beispiel, wenn der Button auf eine Seite mit dem Namen Seitenname.php as, URL: www.website.com/pagename.php verlinkt, bleibt der Button so lange rot, wie Sie auf dieser Seite bleiben.

ich die URL explodierte durch '/' ein bekam so etwas wie:

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>

Anmerkung: Ich diesen Code nicht ausprobiert habe. Es könnte Anpassungen erfordern.

Quelle

2013-07-19 00:46:36

Bitte beachten Sie, dass der Anker beide Klassen hat, wenn er angeklickt wird oder die Maus schwebt und btn-on ist derjenige, der sagt, was nach den Kaskadenregeln ist, wie es nach der Klasse btn ausgegeben wird. –

Sollten wir ein wenig JS enthalten? Weil CSS für diesen Job nicht grundsätzlich erstellt wurde. CSS war nur ein Stylesheet, um Stile zum HTML hinzuzufügen, aber seine Pseudoklassen können etwas tun, was das grundlegende CSS nicht kann. Zum Beispiel ist button:active aktiv ist Pseudo.

Referenz:

http://css-tricks.com/pseudo-class-selectors/ Sie können hier mehr über Pseudo lernen!

Ihr Code:

Der Code, den Sie einfach, aber hilfreich hast. Und ja :active wird nur auftreten, sobald das Click-Ereignis ausgelöst wird.

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

Dies ist, was CSS tun würde, ist gut, was rlemon vorgeschlagen, aber das wäre, als er a Tag erfordern würde, vorgeschlagen.

Wie CSS verwenden:

Sie :focus verwenden. :focus würde funktionieren, sobald der Klick gemacht wurde und bleiben würde, bis Sie irgendwo anders klicken, das war das CSS, Sie versuchten, CSS zu verwenden, also verwenden Sie :focus, um die Schaltflächen zu ändern.

Was JS tun würde:

Die jQuery Bibliothek JavaScript wird uns für diesen Code helfen. Hier ist das Beispiel:

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

Dies wird sicherstellen, dass die Schaltfläche rot bleibt, auch wenn der Klick ausgeht. Um den Fokus Typ zu verändern (ändern, um die Farbe von rot zu anderen) Sie diese verwenden können:

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

Auf diese Weise werden Sie ein Navigationsmenü erstellen. Das ändert automatisch die Farbe der Registerkarten, wenn Sie darauf klicken. :)

Hoffe, du bekommst die Antwort. Viel Glück! Prost.

Quelle

2013-09-24 15:52:04

Gepresste <button> CSS

Antwort

Verwandte Themen