3.5 Links and Buttons

Hey, welcome back to XD to code with Avocode 3. In the last lesson, we got all of our typography set up for our panels two through to five. In this lesson, we're going to be working on the links and the buttons. So let's start by getting our HTML in, we'll just select this content here, copy it as a paragraph. Then in our second and third panels, paste that in and then we're going to need to add in the link HTML. So we're just going to say a href = #, and close that off, then we're also going to set up our buttons for this. What we want is just the text, so just copy the text, and we're going to put the text inside a button element. We'll say, button, add in our text and then we want to have two buttons in each of these sections. All right, so first up, let's style the link for our dark panels. So we're going to target links that are directly inside any panel with the dark_panel class. And we're going to do that by aiming at any a element, any a element link, and any a element visited. Now we're also going to need styling for links being hovered and links that are currently active. So let's go back to Avocode and we're going to grab the color and the font-weight. So we'll just grab those one line at a time, seeing as they're separated, add that in here, color, and font-weight. So that's for the link in its normal mode, then we also need the color for hover mode, so we'll grab that from here. And that is the dark_panel done, now we just need to do the same thing for the light_panel. So just copy all of that code we just created, actually we'll put this after the light_panel code. And then copy the light_panel name, select each of these instances and replace them. And now we can just do the same thing again, select our link, copy the color. Paste that in here actually, default link color, grab the font-weight. And grab the color of the hovered link. Actually, there is a small error in the HTML here. The code editor automatically closed off that link, which is obviously not what we want. Okay, now this is still looking light colored, and that is, I realize, because early on in the course. We changed the name of our highlight_color variable to highlight_color_one, but it didn't change it in Avocode. So I'm just going to go through and fix that now. So let's look for our highlight_color variable here, I'm going to hit the little pin to edit it. And we're going to change that name to highlight_color_one. So now that is fixed here, now we can copy that line, paste that in to correct it down in our dark_panel link color. All right, and now there we go, there's our link with our hover color in both of our panels, so that is all good to go. Now let's go ahead and style up our buttons. The first thing that we need is just a generic style to overwrite the default look of the buttons. So I'm going to go up here and add this to our regular selectors, so we've got a button. And let's see what we can copy over from Avocode, in this case, most of this is not helpful right away. We don't have a fixed width or height and the background color is going to vary from button to button. So what we can grab though is just the border radius. So we'll add that in here, now we're going to use this over at some of these default styles like you can see here. Like we have a border, we have a non default text size. We're going to want to shift up the margins, so that we've got the amount of spacing around our buttons that we want. And we're also going to need the right type of padding on the inside. So we get this amount of space between the outside of the button and our text. So we get rid of that border by setting it to 0, we're going to set the font_size to 1rem so that it is the default throughout our site. We're going to set our margin-top value to use our medium spacing bar, so spacing_medium. And we'll do the same thing on the right side. So if we've got two buttons side by side, then they're going to have a gap in between them. And the button is also going to make sure it's not pushed up against anything that's above it. For our padding, the spacing around the inside, we're going to go with 1rem vertically, and 2.125rem horizontally. Again, that's just a number that comes from a little trial and error just tweaking numbers and seeing what looks right. And then to make sure that people know that this is an interactive element, we're also going to set the cursor to the pointer. Which is the cursor that you get when you're using a link, so now we've got our buttons looking the right shape. The only thing that we need to change up is the color, and we've also got that cursor coming up. So let's add in a couple of class names here, first, we'll just add in the actual class = text. These two buttons here are both going to be light buttons, so we'll type in light_button. And then for the first one, we'll add _1, in the second one, _2, then we'll do the same thing down here, dark_button, dark_button_one. And dark_button_two. Now, let's add in the classes for these, the styling for these. Just get all of these carried over. Now this time, we can use that line from Avocode that gives us the color, so we want this background color for light_button_one. And this background color for light_button_two. Dark_button_one. And dark_button_two. And now we just need to set the text color on both of those. So select our text element here, grab the color. And that's going to be the same color for both of the light buttons, and then for the dark buttons, grab that color again. And add that to both of our dark buttons, so let's check out our work. All right, so now those buttons are looking just like they look in the Avocode document. And that is everything that we needed for the links and for the buttons, so now that section is all looking good. The next thing that we need to do though to wrap up these panels two through five. Is to make sure that things are still looking good as we get smaller and smaller with that viewport. There's not too much that we need to do. We pretty much just need to make some adjustments to the spacing and the font sizes, and we're going to do that in the next lesson. I'll see you there!