# How do I create a responsive button? **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [July 21, 2020, 3:10pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734 "2020-07-21T15:10:43Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\ **Post date:** [July 21, 2020, 3:10pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/1 "2020-07-21T15:10:43Z")
This is good to know: > [@Creating a Circular Button](http://community.thunkable.com/t/creating-a-circular-button/74560): > > Buttons, by default, are rectangular but with just a few minor adjustments you can transform them into circles to completely change the look and feel of your app. Properties To achieve this effect, you’ll need to change the width, the height and, most importantly the borderRadius of your button. It’s worth pointing out that several other components such as the label and the TextInput also have a border radius property. Squares Start by setting the width and the height to the… but I’m trying to make a square button that is not a fixed measure, so that on small screens it’s small and on big screens it’s big. There is the aspect ratio variable but it’s not working, I set it to 1 but it doesn’t make it square. ---
**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\ **Post date:** [July 21, 2020, 3:18pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/2 "2020-07-21T15:18:13Z")
@maxb you could get the width of the screen/container, then calculate a percentage of this (say 30% of 100px for handiness) which would be 30px. In the blocks, set the width and height to this value. ---
**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\ **Post date:** [July 21, 2020, 3:19pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/3 "2020-07-21T15:19:15Z")
ok, but i can set that value directly in the designer, but it doens’t work ---
**Author:** ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)\ **Post date:** [July 21, 2020, 3:20pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/4 "2020-07-21T15:20:59Z")
You don’t need the designer properties if you do this way. Mind you, aspect ratio should be working. ---
**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\ **Post date:** [July 21, 2020, 3:36pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/6 "2020-07-21T15:36:18Z")
this is working for you? ![square button](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/3/83bc980b80b6e2bd26890cedcb2c474451baf1dc.png) ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [July 22, 2020, 8:52am UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/7 "2020-07-22T08:52:29Z")
@maxb here’s an example that creates a square button, roughly 1/4 the width of the screen. [https://x.thunkable.com/projectPage/5f17fc80326e1c3fd1c94c41](https://x.thunkable.com/projectPage/5f17fc80326e1c3fd1c94c41) I’ve also just updated one of my old tutorials (from 2017!) so that you can make sure the button doesn’t get too big or too small: > [@Using Constrain instead of If-Then-Else](http://community.thunkable.com/t/using-constrain-instead-of-if-then-else/1238): > > Updated: July 2020 This article looks at how the constrain block can be used instead of using multiple IF/ELSE blocks. This is not a one-size-fits-all, and there are definitely times where if statements will be preferable, however, I have found lots of scenarios where this is useful. It is ideal for something like a font size or line width where you want to make sure that the values don’t become too small, or prevent negative values. If you have more suggestions of places to use this then let … Hope that helps. ---
**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\ **Post date:** [July 22, 2020, 10:58am UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/8 "2020-07-22T10:58:59Z")
Yes thx, they both helped although, if I’m not wrong Iwas able to make the aspect ratio work in the design tab without using blocks, cause in theory if i set the width to 40% and aspet ratio to 1 it should automatically make a square, but it doesn’t in this case, I’m trying to undesrtadn if I should change other settings but don’t know. Btw your slider app wasn’t showing the changes so I edited it but the slider is kinda broken, maybe needs some more tweaks [https://x.thunkable.com/copy/d1251987050a1d4516a73107aa1b4d8c](https://x.thunkable.com/copy/d1251987050a1d4516a73107aa1b4d8c) ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [July 22, 2020, 12:17pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/9 "2020-07-22T12:17:10Z")
> [@maxb](#): > > the slider is kinda broken I noticed that too - It’s just on Web Preview but it works fine in Thunkable Live. * * * > [@maxb](#): > > if I’m not wrong Iwas able to make the aspect ratio work in the design tab without using blocks I haven’t actually used that property before but I’d try it with a PX value rather than a % value first and see whether or not that works. ---
**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\ **Post date:** [July 22, 2020, 3:19pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/10 "2020-07-22T15:19:27Z")
> [@domhnallohanlon](#): > > works fine in Thunkable Live Oh, if only I could use the app… Btw, I’m realizing that I will have to create blocks for every button if I use the block way, or create a “for every any button in list… do this” which is very not optimized in my opinion, it has to be doable by the design part, maybe a clickable box near the height and width with “same as width/height” ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [July 22, 2020, 5:54pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/11 "2020-07-22T17:54:04Z")
Buttons must have a text @maxb ? If they don’t, there are several ways to create them. If text are necessary, then the loop for the clones ![изображение](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/a/da66070284f091e4b569ca6a64aaae059bcf7fd5.png) ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 12:27pm UTC](https://community.thunkable.com/t/how-do-i-create-a-responsive-button/694734/12 "2024-11-08T12:27:04Z")