Bulma Tutorial (Product Page Build) #11 - Buttons

Key Takeaways

okay then gang so in this video i want to explore buttons a little bit and i want to place a button right here to add the product to cart and also a button down here which is eventually going to open up a model so first of all let's do the button at the top i'm in the top section the product info and near the bottom beneath the price and the paragraph tag i'm going to create a button tag and also whenever we create a button in bulma we give it a button class as well now if i say add to cart right here and save it the default style of this in bulma is quite plain but it does look quite nice now we can customize these quite a lot so first of all what about the color theme well i could say for example is hyphen warning and that should be a yellow kind of theme looks quite nice i could say is danger that should be a red kind of theme what i'm going to do is is primary and that's the green one like this and that looks quite nice that's the color i'm going for now we can also alter the sizes so i could say for example is large like so save that and we get a big button or i could say is small and we get a small button and i could say is medium which is pretty much the same as the default size maybe it's a slight bit bigger i don't know let me take that off and see okay yeah medium is a little bit bigger but i quite like the size of the default one we can also add things like is rounded to give this rounded corners okay looks all right and we could say is loading like that to get a little loading spinner now typically we do that if we click on it then perform some kind of asynchronous task like get some data it could show this spinner while we're trying to do that task and then do something else when we get back we obviously don't want a little loader on that we just wanted to say add to cart so there's quite a lot we can do with buttons that's all i'm gonna do just say is primary i also want a button down here so let's go down to that section which is right here let's do a button and give this a class of button i'm not going to do any extra styling of this i'm just going to say sign up like so and we should get a sign up button at the bottom that looks fine but what i do want to do is center this in the middle now what i need to do in order to do that is cut this and surround it with a div and then i'm going to say has hyphen text hyphen centered as the class of this so it centers anything inside it save it and now we get that in the middle i also want to give this a margin top so i'll do it on the button directly mt hyphen five just to bring it away from the text and that looks okay cool all right then so that is buttons my friends if you want to learn more about them definitely check out the docs there's loads of different things we can do with them you can see all the different colors all the different sizes and we can see all the different types of buttons for weight outlined etc so definitely check those out but in the next video what we're going to do is take a look at cards and play some cards down below at the bottom