Can someone show me how I can style a button through css?

HTML & CSS
21

@John_Betong: I may be mistaken, but I’m pretty sure that the “visited” state can only apply to links.

(Also, hover will not work on touch screen, or with keyboard navigation.)

As far as I know, John is right and you would need JavaScript to do that.

3 Likes
22

I usually pair any :hover selector with a :focus selector to get the same effect with keyboards.

2 Likes
23

Yes you would need to script the change of colours with js in the same way that the player is toggled on and off.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.tuner button{
    width:243px;
    height:20px;
    cursor:pointer;
    border:none;
    background:green;  
}
.tuner button:hover {
	 background:blue;
}
</style>
</head>

<body>
<div class='tuner'>
  <button id="playButton"></button>
</div>
<audio id="player" style="display:none;">
  <source src='http://rfcmedia.streamguys1.com/classicrockpremium.mp3' type='audio/mpeg'>
</audio>

<div class='tuner'>
  <button onclick="var player = document.getElementById('player');player.paused ? (player.play(), this.style.backgroundColor = 'blue') : (player.pause(), this.style.backgroundColor = 'green')"></button>
</div>

<script>
(function() {
    var player = document.getElementById('player');
    var playButton = document.getElementById('playButton');
    playButton.addEventListener("click", playIt, false);

    function playIt() {
        if (player.paused) {
            player.play();
            this.style.backgroundColor = 'blue';
        } else {
            player.pause();
            this.style.backgroundColor = 'green';
        }
    }
}());
</script>

</body>
</html>

There’s two versions above. One is the wrong way and one is the right way and I’m sure you know by now which is which.

Bear in mind JS is not my area and the background of the element should really be controlled by swapping classes on the element rather than changing its style attribute.

3 Likes
24

Just to clarify a point which was not actually explained anywhere:

In your original (non-functioning) code, you had

.tuner {
    width:266px;
    height:24px;
    cursor:pointer;
    background-color:black; 
    border: 3px solid #0059dd;
}

<button id="tuner">

.tuner refers to something with a class of “tuner”. To refer to the id you would use #tuner.

So you either need to use

.tuner {
    width:266px;
    height:24px;
    cursor:pointer;
    background-color:black; 
    border: 3px solid #0059dd;
}

<button class="tuner">

or

#tuner {
    width:266px;
    height:24px;
    cursor:pointer;
    background-color:black; 
    border: 3px solid #0059dd;
}

<button id="tuner">

There are several differences between class and id, but the most important to remember is that an id can only be used once in a document, whereas a class can be used multiple times.

6 Likes
25

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.