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

HTML & CSS
1

i’m confused on how to set this up.

id="tuner" / <div class='tuner'>???

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

<button id="tuner" onclick="document.getElementById('player');player.paused ? player.play() : player.pause()"></button>

<audio id="player" style="display:none;">
  <source src='http://rfcmedia.streamguys1.com/classicrockpremium.mp3' type='audio/mpeg' />
</audio>
2

So am I as far as what is required.

I have updated the Fiddle

Please ignore the new colours, padding, text, alignment, etc. They have just been included to make it easier to see the results. The additional text is easily removed to achieve your desired results.

There was a problem with the CSS because of extra curly-brackets.

1 Like
3

Thank you for showing me how to do this.

1 Like
4

Is there a way to make it change colors when you click on it?

5

Yes Google for CSS hover and make sure there is no spaces either side of the :

6

Can you show me how to implement it? I looked at it and I’m confused on how it’s done.

7

What have you tried that does not work satisfactorily?

1 Like
8

I’m not changing a color of a link.

9

What item are you trying to change color?

10

The block element. the div class. tuner.

11

Try applying :hover to the div block element.

Also note that there is a specific order of the attributes otherwise there is a good chance they will not work correctly,

L ink
V isible
H over
A ctive

12

it’s not going to work though cause it not a link.

13

Have you tried it?

14

Yes and it works for me:

.tuner:hover {background-color: red;}
15

It’s not working.

16

I want to change the color of the tuner button.

17

You seem to give up easily :slight_smile:

Try this:

.tuner {
  width:  243px;
  height: 20px;
}

.tuner button{
  width:  inherit;
  height: inherit;
  background-color:lime;
  cursor: pointer;
  border: none;
  color: red;
}    

button:hover {
 background-color: cyan;
}
2 Likes
18

How do you get it to stay on a specific color?

19

How do you get it to go back and forth between colors when you press play and pause?

When you press play it changes to a color and stays, you press pause and it chages to that color and stays.

20

Did you not understand post# 11?

There is a specific order which must be followed.

I believe that once a button is clicked the state changes to visited.

As far as toggling the colour back to the original then maybe JavaScript is required.