border-left: 3px solid #0059dd;
I was going to do the borders last.
What were those on the variations you were doing, if theyâre not borders?
the middle part.
Iâm trying to understand how Gradient Generators work.
Well if you want buttons, thereâs a good and reliable way to make them.
Start with their container, that being the player area.
<div class="player">
</div>
Put the buttons in there. You want the buttons to be horizontal, so use a span
element for each of them.
Give the buttons a size and background.
.button {
width: 83px;
height: 44px;
background: black;
display: inline-block;
}
Those spaces between the buttons arenât wanted. We donât text spaces between them, we only want their margins to keep them away from each other instead, so set the font-size to zero, and those buttons edge up to each other.
.player {
font-size: 0;
}
We want the buttons to be 3 pixels away from each other, so give them a 1.5 pixel margin. Adding the left and right together gives us a 3 pixel separation.
.button {
...
margin: 1.5px;
}
Give the player a background color so that you can see how thatâs affected.
.player {
...
background: green;
}
The right of the player extends off to the far right, so use inline-block
to keep the size wrapped around the buttons instead.
.player {
...
display: inline-block;
}
The outside borders need to be expanded because currently they are only 1.5px. Add 1.5px padding to the player.
.player {
...
padding: 1.5px;
}
And you now have solid and reliable styles no matter how many buttons you have in there.
The basic rule is, if you want them to be x distance apart, set the margin and padding to be x/2.
Added images
Does this make sense?
<div style="width: 94px;height:44px;background-image: linear-gradient( to right,#0059dd 0px,#0059dd 3px,#000000 0px,#000000 91px, #0059dd 91px);"></div>
0, 3px, 0, 91px, 91px.
No it doesnât make any sense as to what benefit the gradients will be of any help when it comes to your buttons.
The width should be: of each of the boxes.
83px / 88px/ 83px = 266
Make the second button (the middle one) wider than the others.
.button {
width: 83px;
...
}
.button:nth-child(2) {
width: 88px;
}
I converted it to linear gradient and the borders are still clickable.
<style>
.playButton { display: inline-block; }
.playButton svg { fill: white; }
.playButton.fm1980s.clicked svg { fill: #1ed760; }
.playButton.adagio.clicked svg { fill: #d7601e; }
.playButton.soundtracks.clicked svg { fill: #d71e95; }
.preventWrapping { white-space: nowrap; }
</style>
<div class="preventWrapping">
<div class="playButton fm1980s" style="width: 83px;height:44px;background-image: linear-gradient( to right,#000000 83px,#000000 83px);background-color:#000000;cursor: pointer;border-top: 3px solid #0059dd;border-left: 3px solid #0059dd;border-bottom: 3px solid #0059dd;" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewBox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewBox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;margin:15px 34px;" width="16" height="14" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill-rule="evenodd"></path>
</svg>
<audio style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
</div><div class="playButton adagio" style="width: 94px;height:44px;background-image: linear-gradient( to right,#0059dd 0,#0059dd 3px,#000000 0,#000000 91px, #0059dd 0, #0059dd 94px);background-color:red; cursor: pointer;border-top: 3px solid #0059dd;border-bottom: 3px solid #0059dd;" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewBox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewBox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;margin:15px 34px;" width="16" height="14" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill-rule="evenodd"></path>
</svg>
<audio style="display:none;">
<source src='http://hi5.adagio.fm/;' type='audio/mpeg' />
</audio>
</div><div class="playButton soundtracks" style="width: 83px;height:44px;background-image: linear-gradient( to right,#000000 83px,#000000 83px);cursor: pointer;;border-top: 3px solid #0059dd;border-right: 3px solid #0059dd;border-bottom: 3px solid #0059dd;" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewBox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause" style="display: none;margin:15px 37px;" width="10" height="14" viewBox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker" style="display: none;margin:15px 34px;" width="16" height="14" viewBox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
fill-rule="evenodd"></path>
</svg>
<audio style="display:none;">
<source src='http://hi5.streamingsoundtracks.com/;' />
</audio>
</div>
</div>
<script>
function getButton(el) {
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector('.play');
var pause = button.querySelector('.pause');
var speaker = button.querySelector('.speaker');
button.classList.add('clicked');
player.volume = 1.0;
play.style.display = 'none'; speaker.style.display = 'none';
if (player.paused) {
play.style.display = 'none';
pause.style.display = 'inline-block';
player.play();
} else {
play.style.display = 'inline-block';
pause.style.display = 'none';
player.pause();
}
}
function showPause(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
button.querySelector('.speaker').style.display='none';
button.querySelector('.pause').style.display='inline-block';
}
}
function showSpeaker(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function () {
return player.paused === false;
}
if (player.isPlaying()) {
button.querySelector('.pause').style.display='none';
button.querySelector('.speaker').style.display='inline-block';
}
}
</script>
Well done.
The borders werenât supposed to be clickable I thought.
They arenât clickable on what Iâve done in post #86
You might want to pay some attention to that.
Content, padding and borders are all clickable.
When you use the button margins to keep the buttons away from each other, those margin areas arenât clickable.
How do I implement this
on here?
Start over with https://jsfiddle.net/u064wj7z/7/ - copying over things that you need from https://jsfiddle.net/m2c91vpo/
If you had followed advise from experts here on how to improve your code, it would be easy to modify and you wouldnât have to start over.
But as things are, starting over is the easiest and best solution available to you.
Like that?
<style>
.player {
font-size: 0;
background: green;
display: inline-block;
padding: 1.5px;
}
.button {
width: 83px;
height: 44px;
background: black;
display: inline-block;
margin: 1.5px;
}
.playButton { display: inline-block; }
.playButton svg { fill: white; }
.playButton.fm1980s.clicked svg { fill: #1ed760; }
.playButton.adagio.clicked svg { fill: #d7601e; }
.playButton.soundtracks.clicked svg { fill: #d71e95; }
.prevent
</style>
No, develop it a line at a time, adding in piece by piece and testing that things continue to work as you add more to it.
I can take you through the process. Would you like to learn more?
Can I leave this as the starting point without having to start over?
I removed the borders in it.