So to get started let's just head over to our birthdayForm.scss file and let's add in a couple selectors here. So let's first add in.submit-container and .submit-container input.

So what this is going to allow us to do is one access the submit container and two access our input. So the reason we are styling a container is to give it a background as you can see here there's a background here. The input is just the generate countdown text you see within it. So in our submit-container tag let's go ahead and add in a transform: skew(-30deg). This is going to skew our container over. All right so it skewed over and you'll also notice that the text is skewed and will get to changing that in a second. So next we want to add in a height: 50px; and width: 300px; to give it a nice height and width going on there. So now that we have that let's go ahead and add in a border-radius: 4px; to give it a nice border radius there and the next thing we want to add is the box-shadow it's really subtle but the details count so let's go ahead and throw that in there using box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);

.submit-container {
    transform: skew(-30deg);
    height: 50px;
    width: 300px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
 }

That will give us a real sort of kind of grayish look. Okay so you can already see it. We just have to style our input now to fit this box. We can also look at box-shadow in css and right here on the Mozilla docs you can see that by clicking on these you can get an idea of how this works.

Let's put in our box-shadow we put in 0 2px 4px 0 rgba(0,0,0,0.1) so it's really subtle but that's the effect we are getting. We can also increase it a bit if you put it down like 5px, 6px, 2px for the fade. We could even increase this a bit so you get more pronounced effect here, let's toss this in here and you'd probably change it back depending on what it looks like. Yes will change it back but if you mess around with that you can kind of get an idea of how this works and what you want to get from it. If you go back you can also look at the W3 school's docs on it and they're pretty good. So box-shadow high offset, vertical offset blur spread and color so thats what those all mean. I was really confused when I first used box-shadows because I thought each one of these numbers here was like the left the top the right and the bottom. Kind of like how margin and padding works but it turns out it's a lot different. So yeah it's good to look at the documents and mess around with it.

Let's go ahead and get that other box-shadow in their our original one. And then let's just align our text a little bit so text-align: center;and let's give it an increased font-size: 1.25em; and you can read about what em units mean by just searching something like em css W3 and the first thing you get is css units of W3 schools and it tells you what they all mean. So em relative to the font-size of the element 2em means 2 times the size of the current font. So we're looking at about 1.25 times bigger of the current font. And let's increase the margin-top: 42px; to give that space in between. All right so we have that space now let's just fill in this button

and let's unskew the generate text. So to unskew it to skew it back to how it was we just have to transform just the input now and let's put it at 32 degrees because we've skewed it and that's going to skew the whole entire submit container. And you can not skew something that's in it. So basically we're skewing it back. So it's as if we're skewing this 30 degrees. So it's all just it all just an illusion. Like if we were to unskew this it would now be skewed the other direction 30 degrees. So it's like we're moving the entire thing 30 degrees and then moving it back 30 degrees. So save that and then let's give this a `height: 100% and see if that affects it.

.submit-container input {
    transform: skew(30deg);
    height: 100%;
  }

Sweet and we don't really need to fill it into the right and the left we can actually just make the background-color: transparent; and that will get rid of that and then we can just give this a background color of the blue we're looking for. And we also want to get rid of this border. So say border: none; and let's give the color: white;so you can see the text anymore but it's there. So let's give this a background color of the color primary I believe. All right now that should give us that color and let's reload this and we're not getting it. Well, think about why? Background color primary and it's because we named it something else blue primary. When I learned how to use color names in CSS variables the guy in the tutorials was using color a lot so not the actual name so I keep thinking of that. Do that and you will see the colors now there it looks exactly like this button and looks like the font might be a little different the font-weight. Let's add in a font-weight: 200; and a `font-size: 18px. Yeah, that looks great. Just the font size being down to that matches this and it gives a nice feel. The font size of this is 18 and this is 18 so it's really good to keep things consistent. Just that font size being off threw things off a bit so if I change that back you can see how much different this looks.

It's really subtle but it makes the difference so let's make that 18px and that should be it for our submit button and container and our app should be working 100%. That is it for this guide and this application I will see you guys in the next guide if I make any more for this app but other than that we will be moving on to the next application. Also really quickly since I always forget let's

git status 
git add .
git commit -m "styled button and finished birthday countdown v1.0"
git push origin master

I will see you in the next guide.

.submit-container {
    transform: skew(-30deg);
    height: 50px;
    width: 300px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
    text-align: center;
    font-size: 1.25em;
    margin-top: 42px;
    background-color: var(--blue-primary);
  }

.submit-container input {
    transform: skew(30deg);
    height: 100%;
    background-color: transparent;
    border: none;
    color: #fff;
    font-weight: 200;
    font-size: 18px;
  }

Resources

Source Code