The way we can do this is by first starting in our courseLibrary.js and giving our add and remove buttons some tags to work with. So the first one we want to add is course_add and course_remove.

OK. So let's go into our courseLibrary.scss and let's at these tags so .course_add and course_remove. So the code is going to be pretty similar to this, so we are going to first write it out in .course_add and then add a mix in later on. So let's start with a background-color: black; because we know that's what color the button is. Let's just look at the design real quick so we know what we're looking for. All right so we're looking for this x right here and that plus.

Let's start with the plus, so we have a background color of black and let's give this a font size of 16 pixels so the lines can be that large. All right so now we just want to give it a high of, and back in our design I have access to the inspector mode so I can see how high it's supposed to be. It looks like it's supposed to be 32

!

I'll just write that in so height 32 pixels and width 32 pixels. Now let's give this a border radius of 16 pixels.

.course_add {
    background-color: black;
    font-size: 16px;
    hight: 32px;
    width: 32px;
    border-radius: 15px;
}

The reason we're doing that is so that we're getting exactly half of this width and height so we can get a circle. If you look you'll notice we have a circle now that says add in it, you can barely see it but add is in there.

And if we were to do 15 pixels you'd see a slight squarish look to it

because it's not entirely going around and that's because we need to take at least half of the width and height to get a perfect radius. You could also just do like a thousand pixels or 100 pixels and it would work the same. But I'm going to be adding in 16 pixels. So now we just need to give this a position of relative so our lines will actually appear, because our lines are going to have a position of absolute so we can position them on top of our circle here.

The way we're going to add these are using the after and before selectors. Now we want to give this a blank content and the reason were doing this is because we need to give it some space and we did this earlier in the check mark in the after selector to do the same exact thing in the last guide. So we're going to do that and then we're going to give it a display of block the same thing we did with the check_mark and then we're going to give this a background color of white and thats so our lines will actually be white. And then again I said we're going to give us a position of absolute.

    &:after,
    &:before {
        content: '';
        display: block;
        background-color: white;
        @include position-center;
        transition: all .3s ease;
    }

Basically what we need to do to add those lines is select in each one of these our after it is going to be the horizontal line. So let's give that a height of 0.2em and then let's give this a width of 1em, we could use pixels but let's just do this for now.

&:after {
    height: 0.2em;
    width: 1em;
}

So there's the line

and then let's just copy this and type in before this is going to be the horizontal line and what we can do is just swap these values so we're going to make this the width and make this the height. All right so that should give us our plus line. All right so yeah that's in there too you can barely see it.

Now this is where the positioning comes in. We need to center it in this course add selector and the way we can do that is like we've done many times before I'll just scroll up and see if we've done it anywhere in here, right, no where in here. We've done it in other apps.

Basically all we need to do is give it a position of absolute and then give it a top of 50 percent left to 50 percent and transform translate negative 50 percent negative 50 percent.

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

and let's just put this in a mix in because we know the center stuff. So let's just call this @mixin position-center

@mixin position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

and then let's include this mixin all right. So if we ever need this anywhere in the future or in any of our components or anything in this app we will be able to just include position center and know that it'll position in its container. And you also have to set the parents position usually to relative but it doesn't matter as long as you set the position of the parent container will work. So let's save that and you'll notice that we have our plus button.

Now, if I comment out relative like I was saying it won't appear.

So it's not in there, but we need that. So let's go uncomment that and let's get rid of the add while we're at it. So lets uncomment that, let's head back to our courseLibrary.js and get rid of our add text in our a tag which is right here.

So let's just get rid of that and let's get rid of our remove as well, all right now, that's it for the add. For now we want to do is basically if we get rid of the before which we know are horizontal and go back to the app. You notice we get this minus button.

Well, we don't want a minus we want a vertical line but we actually need both of the lines because we're not trying to get a minus line we are trying to get an x.

So what we can actually do is just rotate these lines in the course remove. So let's just copy this entire .course_add and since we know it's basically the same thing we can just cut it out and make a mixin for this so @mixin add_button. I don't know what the best practices for scss functions so let's just google it. It looks like they use dashes in their functions too. So let's go ahead and use dashes as well because that's probably the best practice since it was on their website. So positionCenter lets change this back to position-center, lets change addButton to add-button.

Now, we just need to include these into both our .course_add and .course_remove so @include add-button. Now you'll notice whenever we click this now it we get the same effect.

So all we need to do is rotate this by 45 degrees so we can get the x that we see here in the design which is pretty simple. So there's a couple of ways we can do this. Let's try this, in .course_remove lets say transform: translate(45deg); and that's going to mess something up and I'll tell you what that is, so we hit plus and nothing happens. Let's see. Transform rotate is what I wanted. All right. So rotate let's click on this and it's working awesome.

So it didn't mess up what I thought it would but there is another way we can rotate these and it will mess it up without adding in another thing. So we just have to copy these before tags or let's type them out. So &:before &:after and in here we just want to transform: rotate(45deg); so let's copy it that and put it in the after tag and save it. And now when we reload it and click it you'll notice it screws up everything.

And that's because instead of rotating the entire button we're rotating just these and with the transform origin it's screwing it up. Well actually what's happening is this transform here is overriding our transform in our position-center which is being applied to the after and before. So, let's copy translate minus 50 percent minus 50 percent and come down here and since we're applying that to this and then we are overwriting it with this transform we're no longer translating it. So we just have to make sure that's in there with it.

&:after {
    transform: translate(-50%, -50%) rotate(45deg);

So save it and we should be good there. And you might wonder why we do it this way when we can just transform the whole thing. And that's because of animations that I want to get into, and we will be doing those animations in the next guide so I'll show you how we can animate it this way with just the transform and then I'll show you how we can make an even cooler animation with the before and after tags.

So save that and make sure all your files are saved. We're going to pause on this and then get the animations done and then we will head on to get the button in here as well. So let's commit our code so git status, git add ., git commit -m "added in plus and minus buttons". All right git push origin master. And I will see you in the next guide where we will handle those animations.