Placing Styled Buttons on the Page
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] I hope I'm back to the reactor in the sky Stifler buttons here. Yeah basically that's about it. No. And this time we are going to position them correctly. So we have our two links down here I'm going to close this and I'll get to it. So in our news content we named these Abbe's and added newsletter. So let's just go ahead and put these these in in the news content he says say a newsletter and newsletter analyst position these using absolute thoughts a position absolute. And we'll just deal with the issues that are ripe right now and we'll say okay we'll do that solicit position absolute and then we can say great deal picks and bottom 0. If you say that we will see it right around here. But in our design it's a little bit over. So looks like it's about 10 pixels over and see what pixels from the bottom. Okay. So super simple HTML pixels from bottom 10 pixels from the right. Let's go back and wrap here and it's positioned correctly. Now let's go out. Position was not one principal position absolute top two pixels just like are at it and right 10 pixels. Now this is going to position it in the same place but and the legs all the. We don't want it to be part of this we want it to be up here. So if you look at our design it's just right up here. So let's see the distance green here it's 13 pixels. [00:01:48][106.4]
[00:01:49] So you might think we can just do 13 negative 13 pixels on top but we can't because if you do zero pixels it's going to be right there. Which means we have to do negative 13 pixels and if the height of this which is earning 12 pixels is what I'm saying. So you might just think we can do 12 pixels but it's 24 so we need to minus the height and then the top. So we say minus 24 it will be just at the top here. Now we want it to be the 12 pixel like this. So this should add native 12 to this let's say 36 negative 36 places. Right. Well we want it. Awesome. Now if you look at the design it looks pretty much identical except for the icons obviously a bit different and this one is white. So let's change the edit to have a bright colors so let's say color is white and let's change the word to white as well. I'm going to copy this border in action here and just say it's all solid white. I think we can even just say four color is white. And that will do it because it's just going over the color property. So we checked the design. That's what we got. Now it's strange that it looks so white. Maybe it's just cause we have this image right here. But yeah that should be good. Let me just look at the design more time. It looks like the icon is slightly darker maybe it's gray possibly not white. So let's leave it there. We could even just weave the color see bricks. See that makes it look better. Not that looks like garbage. [00:03:27][98.1]
[00:03:28] Let's see white ones get rid of this comma here. And the reason I'm not just saying we're against because it's inheriting it's already it's already got a border. One gets a solid overriding the color inside it's white now and least let him know he changed them. Now that's a the icons pretty nicely. See line reloaded and we have a nice looking picture now content. Now what we need to do is and like if we had images in here which we will adding later on when I show you how to upload images you look pretty good. It looks exactly like like this you see here. Let's get rid of the blue color on this. This paragraph though so I don't know where you put it. I assume it's in this file but if your command shift in Visual Studio code it gives you the search option. And remember this is a guy who's a surgeon skyblue we can find where it is. So it looks like it's in Yeah it's in this file at the very bottom so it's just at the bottom here. Backmarkers can't get rid of that. So he didn't have this back and I'm just going to put it in some text for that just because I want it to look pretty close to this. I wonder if I can copy this text over. Oh Swede's and here. I'm just going to copy this and I'm going to edit it and then I'm going to call it New Year's resolutions. [00:04:48][80.1]
[00:04:50] And we can just edit it in here with our action and this looks like it inherited some of the styles we have in our that we use for signing forms so we'll change that later on. So let's give it a title of New Year's resolution. Something like that. MULLINS It's safe now looks good. It looks like it. Oh yeah the image has been over in red because I have broken but we can quickly change that and we'll do that in the next guy where we were passing an image that might work for you depending on how the route set up on the back end by the time take this I may just make it give it that placeholder by default. So catching the next guy. Where we will either modifier programming or I tell you I've changed around Klitzman or Kosygin status. Good bad. Good company. Analysts say employment he'd heard let's just say please contact us pre approved cable plans. Okay let's hop into the next guy. Kanchan. [00:04:50][0.0]
[284.6]