OnMouseOver; how to centre icons in updated code

I don’t know if its your case but try to take a look at

1 Like

By pure instinct.

That’s what these are.

They have no text.

I think that you misunderstand. @wisher is talking about using no images, no svg, to make the play and pause buttons. They can be made using tricky CSS border techniques on an empty button, instead.

Oh, and even trickier, the play and pause buttons morph from one to the other.

Really, how so? Using mine as an example.

Go and read the article. It’s explained very well there.

I just did.

Is this acceptable code, set up like this?

I just got rid of border-box, don’t think I need that.

I cut the code down dramatically.

html

css

<style>
.button.play {
  border-style: solid;
  border-color: transparent transparent transparent #202020;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}
</style>

<button class='button play'></button>


<style>
.button.pause {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-color: #202020;
...
  border-style: double;
  border-width: 0px 37px 0px 37px;
}

</style>

<button class='button pause'></button>

I just cut the code down even further.

Is that acceptable?

html

css

<style>
.button.play {
  border-style: solid;
  border-color: white white white red;
  border-width: 37px 0px 37px 74px;
}
</style>

<button class='button play'></button>


<style>
.button.pause {
  border-style: solid;
  border-color: blue;
...
  border-style: double;
  height: 74px;
  border-width: 0px 37px 0px 37px;
}

</style>

<button class='button pause'></button>

I just cut the code down even further.

I removed the 3 periods from the pause.

Is that acceptable?

html

css

<style>
.button.play {
  border-style: solid;
  border-color: white white white red;
  border-width: 37px 0px 37px 74px;
}
</style>

<button class='button play'></button>

<style>
.button.pause {
  border-color: blue;
  border-style:solid ;
  height: 74px;
  border-width: 0px 37px 0px 37px;
}

</style>

<button class='button pause'></button>

I just made 2 div tags.

<div style="width:0;border-style: solid; border-color: transparent transparent transparent red; border-width: 37px 0px 37px 74px; "></div>

<div style="width:16px; height:74px; border-color: blue; border-style:solid; border-width: 0px 37px 0px 37px;"></div>

I think that you’re missing the point of what the article was about. It’s not about just creating the visual play and pause buttons.

What it’s about, and why the declarations that you removed were there, is smoothly morphing the visual design from one to another when you click on them, which is shown in the following pen https://codepen.io/chriscoyier/pen/xXJMYX

1 Like

wow, I didn’t know I could do that, that’s cool.

How did I mess up on this, what did I do wrong?

<div id="playButton2" style="width: 90px;height: 74px;cursor: pointer;background-color: black;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">


<div class="initial" style="width:0; border-style: solid;border-color: transparent transparent transparent red; border-width: 37px 0px 37px 74px;"> </div>


<div class="pause" style="width:16px; height:74px; border-color: blue; border-style:solid; border-width: 0px 37px 0px 37px;"> </div>

<div class="play" style="width:0;border-style: solid; border-color: transparent transparent transparent red; border-width: 37px 0px 37px 74px; "> </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

What do you think is going wrong?

As long as this is just stuff you are playing with for your own amusement, then that’s OK, but if you ever think of coding stuff for the real world, then you will need to look at real world issues, such as usability.

I don’t understand why the play is doubling up.

I just did it again on another code also, what am I doing?

display: none;

If you’re following the tutorial in the article, then go back and work through it, comparing each step of your code with their code, until you find the discrepancy.

Good one.

Here’s an update where the initial stuff is removed too.

I saw on other code that you started with a black background, that became transparent after someone has clicked on it.
You can do the same without the initial button, just by changing the starting black background to transparent when it’s clicked.