Wciśnięty <button> CSS

Chciałbym utworzyć przycisk, który zmienia styl po naciśnięciu. To jest mój kod CSS:Wciśnięty <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>

Jest zmieniane tylko po kliknięciu & trzymać na nim. Chcę, aby zmieniał styl po naciśnięciu. Na przykład stan normalny będzie biały, stan podczas klikania będzie zielony, a po kliknięciu będzie czerwony.

Źródło

2013-03-17 Kyrbi

Musisz dodać JavaScript. – MattDiamant

Chociaż jest to bardzo możliwe przy użyciu CSS, nie jest to tym, co zaprojektował CSS. Rozważmy JavaScript –

Możliwy duplikat http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-it-ho--be--clicked –

Możesz to zrobić, jeśli zamiast tagu używasz znacznika <a>. Wiem, że to nie jest dokładnie to, co prosiłeś, ale może dać ci kilka innych opcji, jeśli nie można znaleźć rozwiązania to:

pożyczki z demo z innej odpowiedzi tutaj wyprodukowałem to:

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>

Uwaga na użycie :target; będzie to styl zastosowany, gdy element jest kierowany przez hasz. Co oznacza, że Twój kod HTML musi być następujący: <a id="btn" href="#btn">Demo</a> link kierujący się w siebie. a demo http://jsfiddle.net/rlemon/Awdq5/4/

Dzięki @BenjaminGruenbaum o to lepiej demo: http://jsfiddle.net/agzVt/

_{także jako przypis: to naprawdę powinny być wykonane z JavaScript i stosowanie/usuwanie klas CSS z elementu. Byłoby znacznie mniej zawiłe.}

Źródło

2013-03-17 17:43:56 rlemon

+1 Prawidłowe rozwiązanie. Oto skrzypce, które, jak sądzę, lepiej ilustrują to rozwiązanie http://jsfiddle.net/agzVt/ –

Oto uprzątnięte demo, które dodaje również efekt hover http://jsfiddle.net/KyleMit/agzVt/153/ – KyleMit

trochę hacky, prawda? Czy nie ma (nie-JS) sposobu na przycisk, aby po prostu zrezygnować z koncentracji na kliknięciu zakończonym? –

Można użyć stylu :focus, który pozostanie stylem, o ile użytkownik nie kliknie w innym miejscu.

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

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

Źródło

2013-03-17 17:32:22

To nie jest dobre rozwiązanie, nie jest to coś, o co prosił, jeden Sposób CSS polega na użyciu: zaznaczonego selektora i zaznaczenia pola wyboru. –

@BenjaminGruenbaum To dobry punkt - przyciski nie są tak naprawdę zaprojektowane, aby je przełączać. –

Możesz to zrobić za pomocą php, jeśli przycisk otworzy nową stronę.

Na przykład, jeśli link przycisku do strony o nazwie pagename.php jako, adres url: www.website.com/pagename.php przycisk pozostanie czerwony tak długo, jak pozostaniesz na tej stronie.

I wybuchła url przez '/' na coś podobnego:

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>

uwaga: nie próbowałem tego kodu. Może wymagać korekt.

Źródło

2013-07-19 00:46:36

Należy zauważyć, że kotwica będzie miała obie klasy po kliknięciu lub po najechaniu myszą, a btn-on jest tym, co mówi zgodnie z zasadami kaskadowymi, ponieważ jest wypisane po klasie btn. –

Czy powinniśmy dołączyć mały JS? Ponieważ CSS nie został stworzony dla tego zadania. CSS był tylko arkuszem stylów do dodawania stylów do kodu HTML, ale jego pseudo-klasy mogą zrobić coś, czego nie może wykonać podstawowy CSS. Na przykład button:active aktywne jest pseudo.

referencyjny:

http://css-tricks.com/pseudo-class-selectors/ Możesz dowiedzieć się więcej o pseudo tutaj!

Kod:

Kod że masz podstawową ale pomocny. I tak :active nastąpi tylko po uruchomieniu zdarzenia kliknięcia.

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

To właśnie CSS zrobi, co rlemon sugerowane jest dobra, ale to jak zasugerował wymagałoby a tag.

Jak korzystać z CSS:

Można użyć :focus też. :focus działałby po kliknięciu i pozostałby do kliknięcia gdzieś indziej, to był CSS, próbowałeś używać CSS, więc użyj przycisków :focus, aby zmienić przyciski.

Co zrobiłby JS:

jQuery biblioteki Javascript jest zamiar pomóc nam w tym kodzie. Oto przykład:

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

Doprowadzi to do tego, że przycisk pozostanie czerwony, nawet jeśli kliknięcie zniknie. Aby zmienić typ fokusa (w celu zmiany koloru czerwonego na inny), można użyć:

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

W ten sposób utworzysz menu nawigacyjne. Który automatycznie zmieni kolor zakładek po ich kliknięciu. :)

Mam nadzieję, że dostaniesz odpowiedź. Powodzenia! Twoje zdrowie.

Źródło

2013-09-24 15:52:04

Wciśnięty <button> CSS

Odpowiedz

Powiązane problemy