Play & Mute Button Styles

[00:00:00]
>> So now we're down to this last part here, where now we can do some final styling here to actually get it to look a little prettier, right? We probably don't want that white background on those sliders, we need to get bombshell looks and track seven aligned a bit better, we need that play button to have the green background.

[00:00:19]
So there's a whole bunch of little things that we need to do here. So I'm gonna add that now, I'm just gonna continue to add that on. So here, just for consistency sake, we can stick an ID in front of our button here. We don't want a generic button cuz we've got other buttons in our document, right?

[00:00:42]
So we wanna be sure that the buttons here are the ones that apply to our audio container. So we're gonna say, audio-player-container space button for that reason. We'll keep our padding, our border, our background, transparent, the cursor of pointer and the outline of none. So all of that stuff is good, we just wanted to make that a little bit more specific to apply to our audio styles.

[00:01:09]
And then we can talk about specific buttons. So let's talk about that mute-icon, button#mute-icon. Now, what is that selector? There's no spaces in that. What is that? Where does that come from? What does that mean? Why didn't I put a space in that? Anybody have any ideas?
>> Cuz the mute-icon isn't a child of the button, it is the actual button.

[00:01:40]
>> It is the actual button, right? So the button has that idea of the play-icon. So button with mute-icon, all together, so called all one word, no spaces, okay? Same thing with classes, if you have a class on that button. Why did I do it this way? Because we may have styles later in the document for just the mute-icon, right?

[00:02:03]
And I want my styles to win, so I've made this a little bit more specific. So my styles will override anything that comes later, cuz I didn't write all the CSS. Make sense?
>> Could you just repeat that, it's not a child of the button?
>> Yeah, it's not a child of the button.

[00:02:18]
So if we take a look at our HTML here, we're specifically talking about the mute button. So here it is, Line 23, so it's a button with an ID of mute-icon. So if I said button space #mute-icon, that would mean that I have a button and inside of it I have something with that ID of, I mean, like a span or something like that.

[00:02:42]
So here when we have no space, then they are the same element. Yeah, thanks for asking. Okay, so for my mute-icon then, let's set a width of 2rem to make it bigger cuz we can't see it. And we can give it a margin-left of 1rem. That'll give us a little bit of space from that volume, which we're gonna enlarge here momentarily, so don't be too bothered by what you see there.

[00:03:18]
Let's do the same thing for our play button. So button#play-icon, and we'll style that up. So the first thing that I wanna do is set this to display block, because when I set it to display block, now I can put margin and padding on all four sides. When it's a plain old image, I can't necessarily do that, or a plain old button.

[00:03:45]
We'll put on a padding of 0.5rem on all four sides. That'll reduce its size a little bit. And then we can give it a background color of var(--lime). Hey, look at that! Getting closer and closer, okay? Now it's a lovely square, but I really want it to be round.

[00:04:16]
What do I do, how do I make it round?
>> Whatever it is, 50%.
>> Yeah, border-radius is 50%. And that'll turn it into a lovely circle. And just to be sure that we've got it at the square, because, of course, a circle is derived from a square.

[00:04:37]
[LAUGH] If it's more like a rectangle, it'll look more like an egg than a square or than a circle, so let's just give it a width and a height as well. So width of 3rem and a height of 3rem.
>> Can she use aspect ratio?
>> Potentially, you could use aspect ratio.

[00:05:00]
I'm not sure about the support, if the support is completely there for the browsers, but that's definitely an up and coming thing. Yeah, aspect ratio would be fine. Okay, so we've got a green button, nice, but wouldn't it be nice to have something like it'd change color on-hover?

[00:05:20]
Wouldn't that be awesome? Yeah, so let's add that. Button#play-icon, :hover, all one word, okay? So this is a button with the ID of play-icon on-hover, no spaces in there at all. And we can set our background color to cyan. That'll match the rest of the site where we have lime going to cyan, right?

[00:06:04]
Because we imported this icon from Lonnie Web, it's an SVG, and so this will all work just fine. Make sense? Okay, and then the last part here, for this playing icon here, we need to make that triangle not blue, we want it to be black. Anybody have an idea of how to do this?

[00:06:26]
It's an SVG, so it's a little different.
>> SVG stroke?
>> Yeah, close, it's a path. But yeah, it's not like border or anything that would come to mind immediately, right? So button#play-icon space path. And there's a space because this is inside of the button, right? That is not obvious here in our HTML, but because the JavaScript connection to Lonnie Web, this is pulling in that SVG over the API, and we're now referring to a path inside of that button, okay?

[00:07:07]
So that's where that selector comes from. And we just say stroke, I'm sorry, did I say? You were right. [LAUGH] Path is the selector, and stroke is the property. So stroke is var(--white). Or black, so we can actually see it, black. [LAUGH] There we go. Nice?

[00:07:39]
[MUSIC]

[00:07:40]
Still plays. [SOUND] All is well. [LAUGH] Okay. And I've got a couple more notes here, we're just continuing to go on through here and style other things, so. I bet that audio player container path stroke white is probably pertaining to that mute button. We go to our mute button.

[00:08:13]
Let's say button#mute-icon, path, and we'll set it stroke to var(--white). There we go. So now our mute-icon, let's make sure that that's still working.

[00:08:36]
[MUSIC]

[00:08:37]
Yep.

[00:08:38]
[MUSIC]

[00:08:40]
Still working.