Create Dual Buttons with Oxygen Builder

[Music] what's up everyone welcome to another video in this video i am going to walk through a different way to do a dual button setup so right now i just have a some items directly from the design library specifically the proteus library so i just got some some items put on a page here and what i'm going to be doing is just giving us another option besides the two buttons like we see here so let's go ahead and jump right into it now to start i'm going to click on our main div here and then come up and add a another div that way it just doesn't end up inside that same one and in here we are going to go ahead and add a button and i'm just going to go ahead and duplicate that right away so let's go ahead and open that and start with our div so with this i'm going to set this to horizontal and middle and center and then what i'll do is go ahead and set this to 100 and let's see how that looks there that should work okay and actually instead of center because of how this is all set we're going to go to the left here so next i am going to also add in a text field inside this div so just go ahead and add a text in there and i'm going to sit that right between these two so what i'm going to do is just double click in here and type or and so let's go ahead and style our our text section here first now what we're going to want to do is set this up to have either a clear background depending on what we're doing here and in this case um it's not going to work for us exactly so i'm just going to put a white background on this and let's go ahead and set this to white and then we're going to go over to our sizing and we're going to have to set a width and a height and i'm just going to go ahead and do 30. and then next we're gonna go ahead and choose our layout for this and you may notice sometimes that it it's not actually sitting centered so if you want to do that we can do flex choose column and then center and center and that will make sure that it's centered within those 30 pixels both vertically and horizontally and then next we're gonna go over and change our typography a little bit so we can click on our typography field and i'm gonna make this um 0.7 rem and i'm going to make our font weight um 900 a little too much let's try 700 that looks good and then next we are going to come over to our borders and this is where we can set this to 50 to make it a circle so now you can see that it's splitting that directly in between and now we can start working on our buttons and actually there's one thing i forgot that we needed to do on this and let's jump back over into layout and i apologize that i left this out because it hides all the way down at the bottom we're just going to put a z index and let's just throw a 2 on there to make sure that we're above the buttons and you'll see in a few minutes exactly why we're doing that so now we can come over to our buttons and i'm going to just go ahead and add um some classes to these so i'm going to do d btn for do a button and i'll do um light on one side and on the other side i'm gonna do the button and this one i'm gonna do dark and you can name these whatever you want i'm just doing something so they're different similar to what we see here so i'm going to jump back up to our top one here and we'll start stylizing that one so again we can start with our background and choose that and we'll set this to that same blue that we have so we can go with that and then we're going to um let's set our typography right away and we want to choose a darker font here to make sure that it's good with accessibility and we'll go increase that font weight a little bit see looks like we're at 500 already so yeah let's go up to 600 and then let's see what else we can do here to stylize this out a little bit more we can throw some additional spacing on here and in my case i'm going to do all m units here so i'm just going to drop a one in there and click apply all that'll just save me a little bit of time so i don't have to click on each one of them and then here i'm gonna add a little bit of space to each side here i mean we may change that in a little bit here we'll we'll see and let's see here what else do we want to do to this in line with what we're doing let's go ahead and do our borders next so typically you would just set your all borders but i'm going to go ahead and do edit individual radii by clicking that and we're going to set the top left to 50 and the bottom left to 50 and you should see it's a nice rounded just like we have up here and then on the right hand side i'm just going to leave those as is and then i'm going to next go over to our effect and we're going to throw some transition on this you can do whatever you feel is necessary i'll do 0.3 and i like ease in out and we'll do css property we'll do all and that's just so when we hover that we get a nice transition so now we can go ahead and actually set up our hover so click on the state up here and then we'll choose hover and in this case all i'm going to do is have to click back here a couple of times let's change our background so in this case if we look above here it switches to that green so let's do that same thing so we'll click our background here and we're going to set this green color all right you can click on hover again and go back to original and we can test this out now and you can see that's looking pretty good so let's do the same exact thing over on this the right button here so let's choose our background color to start and this time we're gonna start with the green next we're gonna come over to our sizing and spacing and again we're gonna just use m units so i'm going to put a 1 in there and click m click in here again so i can click this apply all and that way it sets them all to m units right away and then i'm going to set this to 2 and 2 to be in line with their other button now i'm going to come over to um let's hear what i did next was typography and we set that as this dark color and our font weight i believe we did 600 making that just a little bit thicker and let's go over to our borders and again we're gonna choose the edit individual radii and this time we're gonna do it on the right side so go ahead and type in 50 on the top and bottom and you can see that it's only editing the right side there and then next we're going to come over to our effects and we're going to set our transition here as well here we're doing 0.3 again going to do ease in out and css property all all right now let's go ahead and set our hover so click on state up here hover and i need to jump back to our background here and here we are going to set this to this blue color all right we can click on hover again now that we're done with that and go back to original and if we hover over that you can see it hovers nicely so next we want to go back to our spacing here and what we're going to do is throw in some margin and you'll have to play around with this a little bit i think before when i was playing with it i did somewhere around -13 on each of them so in this case we're doing it since we're on the right hand button we want to pull it to the left and then we're going to go to the top button here go to sizing and spacing and this one we're going to do on the right hand side now so you can see it pulls that in nicely and this way we get our our or button or or text sitting above both buttons with just a little bit of gap in there gives it a nice little look and when we hover you can see that in our case right now um the z index is not working when you hover it and that's just showing in the back end so i'm going to go ahead and click save and you'll notice we haven't put any text in here so we can go ahead and do that let's set this one to try a demo and on this one we'll set this too and it's not selecting all that there we go we'll set this one to buy now capitalize that all right perfect and it you can set those to whatever you want make them similar in sizes but we'll just go ahead and click save now and we're going to jump to the front end here and click refresh and we're just going to see what this looks like so we can see our hovers working nicely on both of them our orders staying above that and we can stylize this a little bit more to your liking you can increase the gap decrease the gap change with the border radius a little bit more so in my case i might throw a little bit extra border radius on those uh where the two are in the middle so i'm going to go back to my edit individual radii i'm just going to do three here just a little bit i'm going to do the same thing on our other button jump over to borders individual and we'll put three on there now if we click save and jump back to the front end hit refresh you can see that we get a little bit more of a border or a border radius there on the inner edges doesn't look quite as sharp and again you can change that to your liking and now comes the fun part is we get to see how this looks when we start going to the responsive side so let's go ahead and jump down in size here let's go little by little to see how this looks so you can see already right here we're doing stacked so let's go ahead and match what they did here so what i'm going to do now is take my main div here and we're going to set this to vertical and now you can see it's starting to get a little weird looking here so what we're going to do is go over to our first button here and we're going to go to our sizing and spacing and before we did some negative margin here so we're going to set that to zero and you can see it comes back to center here and then if i come up to this one is where i can put in my negative margin so let's go ahead and do that negative 13 again and i'm gonna do the same thing on the other button and then we'll play with the borders a little bit all right so we need to set the left side on this one to zero and then we'll do the top to negative thirteen you can see that pulls it up nicely and now we can play with our borders a little bit and get it to look nice so in our case let's take a look here so right now we're we have 50 on the top right and 50 on the bottom right let's go ahead and set this to 3 which matched what we had before and we'll set this to 3 and we'll set this to 50 and this to 50. you can see that looks a little goofy so maybe i'll take take some off here and go down to like 25 that looks pretty good so let's jump to our other button and do the same exact thing so we go over to our borders individual radii and now we're going to set our top left to 25 our top right to 25 and our bottom left to three and bottom right to three and now you can see we get that nice border again and now this is where you wanna get them pretty close to having the same width so we can play around with that a little bit and before i do that i'm also going to left align them here so i'm going to jump back up to our div here and and make sure that we click left side here which you can see throws it off here so let's see if we can go ahead and fix that i'm going to set this back to center and maybe we'll just bring our width down a little bit so let's go fifty percent and that looks pretty good um actually it that's a little too too little we'll increase that up a little bit to bring that over and that looks pretty close so now we can play around with this a little bit and get our sizing correct and what we'll probably end up doing is on the bottom here is setting a minimum width so let's click on our sizing and spacing in our min width let's go ahead and play around with this a little bit and see what that is let's try maybe 300 is going to be too much 100 is not enough 150 getting close 175 is just a little too much this is where you get up can play around with it a little bit and get it close and maybe we'll go down just one more that looks pretty close so let's go and take a look on the front end and we'll hit refresh and you can see since we haven't narrowed this down at all it's still looking pretty good so what i'm going to do is come up to hoverify and choose my responsive and now you can see that it's loading nicely in this responsive page we'll scroll all the way to the bottom take a look at how this looks so there you go you can see that in most cases it's looking pretty good we have one here that um it's stacking on us right here so we may have to play with that a little bit so let's jump back over to our editor here and we'll drop down all the way to this bottom size and let's go ahead and just increase our div size back up and we'll set that back to 100 and that way it shouldn't stack on us if i click save and refresh here let's see how that looks on this small screen now you can see that's much better it's not stacking on us you can still see that my sizing is a little bit off on one of them so you'd have to play with that a little bit because you're not always going to have the same amount of text for each of them and it gets a little tricky when you stack them but this is the gist of how to do that make your buttons just pop a little bit and be stand out just a little bit more from what your standard two buttons right next to each other it looks like so this is a way you can do that and again you can change your text in the center here so we could set that to just an ampersand if we wanted just like that but it's all up to you what you want to do you could also use an icon if you wanted gives you lots of opportunity but the basics of how you would achieve this would be exactly the same no matter what you'd put in there so i hope you guys enjoyed this quick video just wanted to give you guys another way to set up dual buttons and you guys have questions please let me know

Channel: LocalSBM

Views: 1,113

Keywords: Oxygen Builder, WordPress, Oxygen Builder 3.7, Meta Box Custom Fields, Dual Buttons, WordPress Dual Buttons

Id: tLGI5EbDRck

Length: 19min 3sec (1143 seconds)

Published: Sat Apr 24 2021