Code with something

1

hi, i want to make a Play and Pause

2

If we’re talking about just styling…

ul{
    list-style: none;
}

.menu li span{
	border: 1.8px solid black;
	width:52px;
	height:18px;
	padding: 2px 0;
    font-size: 15px;
	font-family: arial;
    border-radius: 1px ;
    background: linear-gradient(#515151,#2d2d2d);
    color: #ffffff;
    float: left;
	text-align: center;
}

.menu li span:active {
	background: #fff;
    background: linear-gradient(#383838,#6b6a6a) ;
	box-shadow: 0 -6px 0 #000, inset1px 2px 0  1px #f7b58f ;
	top: 144.31px ;}

Changes:

ul{list-style: none} to remove the bullet point

Matched the font - it was arial

8px was way too much for padding. I toned it down to padding: 2px 0 which basically says “give top and bottom 2px padding, and left and right 0 padding”

To center the text horizontally, I just used text-align: center and got rid of the margins

Once padding was toned down, it was a matter of adjusting height and width to the right values

For future reference though you can use ctrl+shift+c and click over an element and the developer tool will tell you everything about it - including its styling.

1 Like
3

thanks for the styling!!
can you help me out with the play/pause, im sitting here looking at this page
i still not sure how to do it

does this required javascript?

4

hi, i found someone who helped me complete the Button, here’s the file
but i dont know how to upload to my site, so many codes in it.

5

I’m not sure what you mean by upload to your site. Is your website basically up already and you just want to modify it to include the track? There’s no easy way to link to an HTML so you’d have to paste that code in your site’s HTML, but for the other files it should just work if you place the actual files in your website’s directory.

1 Like
6

hi, i’ve uploaded the file to my site,i want to show this button on a single wordpress post ,im confused i’m not 100% sure what am i doing ,sorry im kinda new to coding haha.

https://imgur.com/2Gb6w1R
https://imgur.com/NvgV9Xc

7

Hi @EllenGE!
I’m using the script bellow to do this PLAY/STOP function…

HTML

<button id="btnPlay" class="btn" onclick="radioToogle();"><i class="fa fa-play" aria-hidden="true"></i></button>

JS

function radioToogle() {
  var btn = document.getElementById("btnPlay");
  var player = document.getElementById("track");
  if (!player.paused) {
    btn.innerHTML = '<i class="fa fa-play" aria-hidden="true">';
    player.pause();
  } else {
    btn.innerHTML = '<i class="fa fa-pause" aria-hidden="true">';
    player.play();
  }
}

You can check my pen here: https://codepen.io/fabiobraglin/pen/MveZVy

1 Like