Materialize Tutorial #7 - Buttons

Key Takeaways

alright then so I feel like so far we've been getting hold of all the basics of materialized and a lot of it in my view is pretty pouring stuff but you have to know it to move on and do the better stuff so now I'd like to introduce some of the more meaty concepts of materialized we're going to start with buttons and I think these classes are amazing for creating buttons really quickly so as you can see again I just have this div with a class of container and inside and h4 same buttons then we have these and context right here and these are going to be our buttons once we've classed them up we've give them classes and then we're going to do a floating button example and I'm going to show you other elements as well so the minute this looks like this on the page nothing special but we're now going to start creating buttons very quickly so to make a normal button in materialise all we do is give something a class of BTN and that magically creates a button for you so if we take a look at this you're gonna be surprised how easy this was it creates a nice button with a nice little hover effect or right there so that is super easy to do to create a button like this alright so what if that is a bit large what if we want a slightly smaller button well we can say BTN - small and that's going to do that for us and we should see a slight decrease in size not much but there is something and same goes for a large button we could say BTN - large and that is going to give us a gigantic button or like so alright then so what else can we do well we can color our buttons something different because by default they all get this kind of greenie button over here but if we want to override that we can do we know how to apply background colors we just give them a class keyword for that color so I could say I want to button first of all then I want to make this indigo so if we save that and preview this now we get an indigo button awesome right okay so what about a disabled button a button that you don't want someone to click yet or you want to prevent them from clicking yet well dead easy to do again we say BTN for button then we say disabled so if we save that and see this we can see that this is all grayed out now and it doesn't have a hover effect so that's a disabled button for you oran and so another kind of button is a floating button and these are kind of circular buttons that we normally put icons inside of or something like that so let me just show you a quick example of this I'm going to come to this anchor tag right here and the class I'm gonna give to this is BTN - floating so this is a floating button now if I save that and view it in a browser then we can see this is circular now and when we look at icons we'll look at creating these circular buttons with icons inside them and we will look more at floating buttons later on in the series as well but for now let's just make this a different color first of all and save it we can see now it becomes pink that's cool and I want to show you something really cool here we add a class of pulse and this is going to give this button a pulsating effect now this really only works on floating buttons you're not probably going to get it to work on these buttons right here but on a floating button it looks really nice and just draws your attention to the button alright now it's not just anchor tags we can apply this button class too we can apply it to other elements as well we have a div class right here so I could quite as easily give this a button class and it's going to do exactly the same thing right here so that makes a button as well obviously you just have to hook up your JavaScript or react to this div in some way shape or form because it's not an anchor tag anymore it's not going to take you anywhere so you have to do that functionality yourself but you can apply it to different tags as well not just anchor tags alright so I want to show you one more cool thing now and that is the wave effect for these buttons so if we want to make this look a little cooler what we could do is go to one of these buttons and say waves effect and then we'll say waves I felt like in fact we'll do it on a couple of them so we'll give this top one a waves effect as well and we'll say waves light so two different classes waves effect and waves light and if we go over here now and hover over one of these buttons did we save it yes we did now if we click on this check what happens we get that little wave effect see it starts light and it zooms out was to the edge of the buttons same for this one which we applied it to nice little effect but if we do the other ones it doesn't do that only with the ones that have the waves effect classes to them but could make this waves dark if we wanted to save that I don't think it quite looks as good but it still does the trick that goes dark instead of lighter when we click it all right so there's some simple buttons for you to get cracking on with I think it's really cool this class and lets us very very easily create all these cool looking buttons