 This video we're going to make a custom button with an image. It's going to be called cool button It's going to be pretty responsive pretty easy to work with and this is going to be another end-to-end video So there'll be zero edits. All right first things first We're going to paste in our images just simply an up-and-down arrow And let's actually kill that and let's go in here first thing we want to do in The code is go into cute and we want a QML file Let's call this cool button Probably help if we spelled cool correctly. There we go and In here, let's start flushing out some properties So I'm going to give this an ID of root and let's call this color border and copy and paste time So we got our border color our normal color are pressed Obviously is when we're going to press down on this thing and our hover color We also want a string because we have an image that we're going to be able to update here Let's call this source and this is the actual image source that we're going to pull out of our resource So let's go ahead and let's add in some resources here Open an editor and I want to add some files Doesn't really matter where we put them, but you know what? I'm not really happy with that. So I'm going to remove that remove that Gonna add a prefix Then I'm going to add them in There we go. Just kind of keep those separated. You should say files images up down. We're good to go Now I want to custom signal. I want to be able to say hey, we click this button. So signal Clicked very simple to do that And let's go ahead and actually build our component out. We're gonna say rectangle Just gonna give it an ID. Let's go ahead and give this a radius. That's gonna match the width So it's a perfect circle The color I want this to be the root Color normal border We could have done alias, but I really didn't feel like it to and Border color It's going to be our root dot Color border and what I meant by alias is we could have done a property alias up here saying hey point just to the Rectangle and then we could actually done the rectangle border, but I really wanted some control over that Acres fill Parent Now, of course, we need a mouse area call that area And let's go ahead and anchors fill and do the parent Hover enables going to be true because we want to actually hook into the hover So we get that color hover and before we get too far. I'm gonna add that image. Let's say image and our Anchor we're gonna fill the parent as well Try to keep this pretty simple, but also pretty flexible and let's go with fill mode Because we want to be able to stretch that image out. So I'm gonna say image And we're gonna do a preserve Aspect fit that way it scales appropriately Source I want this property up here. So I'm gonna say root that source and Then we just need our mouse area. So we're gonna say on pressed on released And let's do on entered on exit now. We have our mouse interaction. So On pressed is kind of where the magic happens here. We're gonna say body and we want to go body color But I heard thunder there for a minute a little early in the year for thunder that was a little weird And go color pressed Root and we want to go clicked This is a signal now tell a sense isn't helping us out, but we can just simply grab this and we're gonna admit that signal Very very simple to do that Copy and paste is gonna help us out immensely here and on release is gonna be the color hover Because we're still actually hovering the mouse over on entered. We want to do color hover as well and exit Let's go with color normal. All right cool button exists in all of its beauty. Let's go ahead and jump into our main here and We want a column, but actually let's flip over to design view We've got our cool button here. Let's go ahead and go imports cute quick controls I Want a column and let's just scale this appropriately here put in a specific layout Go back want our cool button. So I'm gonna just drag and drop two of those. I'm gonna go there and there There's cool button cool button one Now we do not have any width or height here. So we need to actually flesh that out. So I'm gonna say 100 by 100 and 100 by 100 There we go We could have set that in the actual component itself, but I wanted the user to manually set that And let's say column. Let's give this a spacing of 25 and let's go ahead and jump into right here, I'm gonna Copy that URL cool button now our source here. Let's just go ahead and paste that in See if that takes And Let's paste that in there. So I want down and This one is going to be up Save and let's run and see what this looks like. There's our buttons Let's go ahead and hook into the on clicked. So I'm gonna say On clicked and I just want to go Console.log Up clicked and we can console log down clicked Save run. Let's test that out. We're gonna bring up our app output here. I'm gonna actually clear it so you can see it Up click down clicked very cool What's up everybody? This is Brian. I hope you enjoyed this video It's part of a larger series out on udemy.com called QML for Beginners. The QML for Beginners course assumes, you know Absolutely zero QML. You're just starting off and it's designed specifically for Qt 5 I will re-record the entire series when Qt 6 comes out and just know that it's over a hundred videos and 13 and a half hours of video on-demand. I'll put a link below so you can get a highly discounted rate and Before you dive in just understand it covers a lot more than what I can put into this list everything from what's QML to Animations to C++ integration JavaScript and on and on and on But one of the requirements up front is you have to know Qt Core You should have some C++ under your belt and be very familiar with Qt 5. In case you have none of that I do have some courses for Qt Core Beginners Intermediate and advanced out on udemy as well. Hope to see you there