How to Create Buttons with Awesome Hover Animations in Oxygen Builder

hello and welcome to design with cracker today we are going to be taking a look at how to create buttons with this awesome hover effect in oxygen before we continue don't forget to subscribe and share this video all right let's go to oxygen um first of all i'm going to add a section now if you've seen my other tutorials you'll notice that the interface is different from this now this is the stock oxygen interface in my previous tutorial i used add-ons like swiss knife for you know to change the theme of the interface and also hydrogen pack for extended options and shortcuts like right click and all that but um since most people are new to oxygen i want to use the stock oxygen interface so that you can follow along with a familiar interface okay the next thing i'm going to do is i'm going to add a text and then i'm going to just type subscribe i'll go to advanced typography i want to change the font family to poppins and i want to change the phone weight to 700 and the letter spacing to two now a button is simply a div you know wrapped around a text with a link okay so that's just what we're going to do i'm going to expand this and then i'm going to go here click and wrap this text with a div now with that div selected i'm going to go to advanced size and spacing and give it a top and bottom padding of 16 pixels and then i'm going to give it the left and right padding of 48 pixel so you see it has a very nice space around the text i'll go back to advanced background i'm going to select that color but then with the div still selected i'll go to typography and set the color of the text to white the next thing i'm going to do is to add a pseudo element a pseudo-element is the before and the after element and that is the element that is going to animate so i'll go to where you have state i'll choose before first of all i want to change the background color then i'm going to go to size and spacing and change the width to a hundred percent and the height to six percent i'll go back to layout i'll change the display to block and i'm going to change the position to absolute now we can see our before element i'll set the position to left and bottom now this is position absolutely in relation to the section but we want it to position absolutely in relative to the div which is the button so we're going to go to we're selecting the div and then we're going to go to make sure that it's in original state we go to layout and we're going to set the div to position relative now our before element is absolutely positioned inside the div i like to increase the height to 10 okay the next thing we're going to do is i want to change this buttons border so i'm going to go back to original so the trick here is being able to remember to switch between original and the pseudo element so when you are styling the pseudo elements remember you'll see before here and when you're styling the original you see state so we are at the original i want to change the border to 100 pixel now if you notice the pseudo element is sticking out we don't want that so we're going to select the div we go to advanced layout and we're going to change the overflow to hidden so where you have the overflow so the pseudo element is now hidden inside the button the next thing we're going to do is to animate it let's go back to the pseudo element then i want to change the size the height back to 100 percent but it is covering our text so what i'm going to do is go to the text and then go to advanced layout and set the z index to 1 so it comes above the pseudo element now to animate the pseudo element we will need to use classes and that will be the best approach for the button so i'm going to give the button a class of button it is usually good practice to start with classes but since we have already started with id we're going to copy the style that we had on this div from the id to the class so i'm going to copy the style and paste here i'm going to go back to the id and then i'll delete the styles from the id the reason we are deleting the style from the id is because if we allow it to stay the classes the styling from the class will not override it we're going to make changes to the class and we will not see it so we have to take away the styles from the id so now we want to animate the pseudo element so we're going to go to the pseudo element advanced size and spacing and change the width to zero so what we want to do is to animate from zero width to 100 width there are two ways we could do that we could use css but i like to use selectors for the sake of those who are not very comfortable writing css so i'm going to go to manage selectors i'm going to add a new selector now what i want to do is i want to add a selector that says when you hover on this button animate the pseudo element which is the before so i'm going to write dot button column hover that means when you hover on the button then i'm going to go two columns which is a selector for the student element i'm going to write before so what this is saying is when you hover on the button target the before element so whatever setting we are going to apply will apply to the pseudo element i'll click ok i'll go to advanced i'll go to size and spacing and change the width back to 100 so when i hover on the button you can see the width changes back to 100 but we need a transition we need to animate so we're going to go back to the div and we're going to go back to the before element and then go set a transition effect transition to 0.6 so now you see there's a transition now in our example here you can see that it has some angle to it and it's faster so we're going to set that transition to 0.4 to make it faster okay and then to add that angle tilt we'll go back to our selector so i'm going to go to manage selectors make sure you select the dot button hover before go to advanced effect transform and first of all going to add a rotate transformation of 45 degree so it rotates but it's not large enough to feel the button i'm going to add another transformation this time i'm going to add scale so i want it to scale maybe like two times okay maybe two here maybe two on z z and then i think we should change this all right so we have a scaling of four okay for the y let's try three okay four is good all right so we have a scale but it seems like that is too fast so i'm going to go back to the div i'll go to dp4 and then change the transition back to 0.6 all right that looks good now the next thing before we do that let's save and then preview what we have on the front end okay that's good now our button doesn't behave like a button okay and for us to make it behave like a button i'm going to select this div and then change it to a link wrapper i'll put the hash there of course and now it's behaving like a button so if i refresh the button is now behaving like a button with a pointer okay the next thing we're going to do is if you look at the original example you could see that the subscribe text grows as we hover so to do that i'm going to select the text and i want to add a class to it button dash text so we have a button text class and just like we did with the div i'm going to copy the style from the text id to the class and then i'm going to go back and delete the styles from the id now we're going to use a selector to animate the text so we're going to say when you hover on the div animate this text so we're going to go to manage select us add a new selector so we're going to use the same technique dot button column hover but in this case since it is not a pseudo element we're going to put a space okay now because the solar element is attached to the div that is why there was no need for a space but this we're going to put a space and just write dot button text okay i'm going to click ok then we're going to go to advanced effect transform we're going to add a transformation of scale so we wanted to scale like 1.2 1.2 1.2 so when i hover it scales but there's no transition so we're going to go back to the text and go to advanced effect transition and then we have our transition so let's save that and refresh and see what we have so that works well so to do the other two examples what i'm going to do is i will duplicate this button so i'm going to duplicate the button by clicking here two times one two and then i'm gonna select the section i wanna stack the child element horizontally and then i'm gonna spread it apart space between because i want it to be a part now for this button we're going to target this button i want to change it to a different class i'm going to call it button dash no dash button 2 i'm going to add the class and then i'm going to delete the class button from this element notice that this is not deleting the class from our workspace but it is deleting that class from this element so i'm going to just take it off okay so you see whatever was happening there is no longer happening because the css or the selector was targeting button and not button two now i'm gonna change the borders back to zero okay and then next thing i'm going to do is to select the before element and then i'll go there size and spacing and first of all let me change it to 100 okay but i want the height to be 10 all right so i'm gonna take this back to zero so that when we hover on it it's going to fill up okay so to do that i need to add another selector that would target button two remember the first one we targeted button one so i'm going to add selectors dot button two column hover double column before and then i'm going to go to size and spacing and change the width to 100 percent so when we hover on the button we have these before elements animate to 100 now if you look at this it doesn't just animate it pulls the button up and then gives a drop shadow so for that we're gonna go back to the div which is the button two and then we're gonna go to hover for that div when you hover we want it to go we want to go to effect transform add transform translate and we want to translate why if we say 10 it's gonna move it down but we want to move it up so i'm gonna say negative five i don't want it to go too high negative five is okay so let's select the original and then once you hover it moves up but we need it to transition so i'm going to go to advanced make sure you are on the original state go to advanced effect transition all right so it animates now it doesn't just animate here we have a shadow so we're going to apply a shadow to the hover state now what i want to do is oxygen usually has shadow effect okay but in this case i don't want to use oxygen shadow effect i want to use this website has very nice drop shadow effect with layered shadow so you could just come here and you know just adjust it so i'm just going to copy that css for that shadow and then i'm going to go back to with that button selected hover and then i'm going to go to custom css and paste that so this shadow effect will show up when you hover let me collapse this remember to go back to original and then once you hover on it so let's see on the front end what it's like all right so we are done with that one so on to this next one okay so for this one we're gonna go back to here and then just like we did for the second button we're gonna add a class and call it button three enter and then we're going to copy the styles from bottom to bottom three that is because we want to delete the class of bottom from this element the next thing we're going to do is to change the pseudo element how it behaves here so i'm going to go to the before of this go to advanced size and spacing i'll change the width to 250 okay let's just change it to let's say 50 and then i'm going to change the height to 50 pixels not percent this time around so we can see it and then i'm going to go to layout and then i'm gonna just remove this zero from here and here so we have the pseudoelement at the center now we're gonna go back to effect no not effect border and then we're going to change the border radius to 100 so we make it a circle okay then going back to size and spacing we want this to animate from zero to let's say 250 which fills up this so i'm going to set this to 0 pixel okay and then i want to set a selector that says when you hover on this and it made the pseudo elements to a width of 250 pixels and a height of 250 pixels so we're going to go back to select us now in this case we already have a selector for the first uh button so i'm just going to click on it and then copy that selector and then i'm going to go to add selector and paste it i'm just going to edit the button and add three for our new button class which is three everything remains the same now i'm going to go into advanced size and spacing we want to animate it to 250 to 150 so when you hover it animates from zero to 250 let's save that and then go to the front end and check all right so we have that now if we take a look at our example you see that the text behaves just like the text on the front you know on the first button it grows so we just repeat the same thing we did so i'm going to just go to the selector that has the selector for the bottom text so we have button hover bottom text i'm going to copy it and then i'm gonna add a new selector and paste it and change button to button three and say okay so now um we have that selector button three of our text and then i'm going to go back to effect transform i'm going to add a scale of 1.2 1.2 1.2 and there we have it so let's take a look at the front end so we have this and we have this and we have this i hope you learned something from this tutorial please don't forget to subscribe if you enjoyed this share this with your friends and if you have any question you ask and i'll be right here to answer have a great day

Channel: Design with Cracka

Views: 2,572

Keywords:

Id: aeEQK01AfMg

Length: 18min 36sec (1116 seconds)

Published: Wed Feb 17 2021