Can someone please show me how I can style this, add background colors and all that?

HTML & CSS
1

I am now familiar with how to style the background of a button.

Can someone please show me how I can style this?

 <audio id="player" src="http://hi5.1980s.fm/;"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>

    <button onclick="document.getElementById('player').pause()">Pause</button>
   
</div>

More specifically,
How would I get these buttons to work on the above code?

<input id="button1" type=button value="Play" onclick="this.style.background='green';">

<input id="button2" type=button value="Pause" onclick="this.style.background='red';">
2

I hope I’m doing this correctly, if not, please correct what I did.

Can someone show me how to move the pause button on top of the red background please.

I’m making progress. I now need help getting the button on top of the red.

3

You keep jumbling different languages together when they should be kept separate.

Now you are jumbling HTML and JavaScript together as if the browser is Netscape 4 or earlier.

4

I’m having trouble with this, can someone please help.

1.) Am I supposed to have 2 different margins like this, and if not, how do I fix it?

margin-left:-60px;
margin-left:100px

2.) Also, I’m having trouble getting the green button on the red background.

       <div style="width:266px;" onclick="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style="width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000; 
border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </div></div>

<div id="myObj5h" style="display: none;">

<div style="width: 88px; height: 24px; cursor: pointer; background-color:blue; color:#000000; 
border-left: 89px solid orange;border-right: 89px solid red;border-radius: 50px;"> 

     <audio id="player" preload="none" style="display:none;">
<source src='http://air.radiorecord.ru:8101/rr_320' type='audio/mpeg'/></audio>

<button style="cursor: pointer;margin-left:-60px; background-color:transparent;padding-bottom:1px;padding-left:0px;padding-right:0px;" onclick="document.getElementById('player').play()">Play</button>
  
<button style="cursor: pointer; background-color:green;padding-bottom:1px;padding-left:0px;padding-right:0px;margin-left: 100px;" onclick="document.getElementById('player').pause()">Pause</button>
</div></div>
9

Lots of people here are trying to help you but you still haven’t done the first step in what we are all telling you that you need to do to fix it - learn HTML and stop writing JUNK.

4 Likes