How to Change Buttons and make them stylish


I want to change the shape of Buttons and make them stylish.

I hope to add animation and the function to emphasize the buttons to the buttons when clicking them....

I'm not familiar with the style change of button to be honest.....

I need some informaton about it.



I'd appreciate it if you could give me some examples of CSS code in order to make the buttons in the image a bit more stylish......

I also have attached my .oml file here as well.

I look forword to your help and reply.

Best regards, 

Solution

Hi Tsubasa,

May I suggest to start with the existing button patterns from Silk UI

Instead of buttons, you may want to consider using Links, and apply predefined classes such as Button, Success or Cancel.

I've attached a sample after modifying your FlashEnglish.oml file.

I hope this helps. 

Regads,

Boney


Solution

Hi,

To make it stylish you have to use custom CSS and overwrite the class name used in the buttons. This will change the style of the buttons. I hope it will help you.

Hello Tsubasa, 


Please check the OutSystems UI Live Style guide forge component here

Also a preview of the same for buttons is available here 

You can see the CSS and everything related to the styling from the above links 

Hope it helps !!!

Boney Sze wrote:

Hi Tsubasa,

May I suggest to start with the existing button patterns from Silk UI

Instead of buttons, you may want to consider using Links, and apply predefined classes such as Button, Success or Cancel.

I've attached a sample after modifying your FlashEnglish.oml file.

I hope this helps. 

Regads,

Boney


Thank you for telling me nicely!

Well I checked your attached file,but I couldnot find the revised parts.

Which parts did you modify?

Also,I inadvertenly attached the old file just a minute ago. I have attached the new one here again.

Sorry about that.

Refer to the outsystemsUILiveStyleGuide. It has a lot of in built features to customize CSS. You can simply try assigning the classes directly. 

https://outsystemsui.outsystems.com/OutSystemsUILiveStyleGuide/Border.aspx 


Cheers,

Tushar

Hi, Please check the link of Silk Ui and you will get how to do the button styles on OutSystems.   https://silkui.outsystems.com/Patterns_Web.aspx#Web_Controls_Buttons

I hope this will help you,

Thank you,

Sudip

Tsubasa Yoshikawa wrote:

Boney Sze wrote:

Hi Tsubasa,

May I suggest to start with the existing button patterns from Silk UI

Instead of buttons, you may want to consider using Links, and apply predefined classes such as Button, Success or Cancel.

I've attached a sample after modifying your FlashEnglish.oml file.

I hope this helps. 

Regads,

Boney


Thank you for telling me nicely!

Well I checked your attached file,but I couldnot find the revised parts.

Which parts did you modify?

Also,I inadvertenly attached the old file just a minute ago. I have attached the new one here again.

Sorry about that.

Hi Tsubasa,

I've added a "Hint" link button on your NormalScreen. Also created a new SampleScreen where you can see other kinds of buttons.

In order to make it easier to have nice buttons and UI, may I suggest also to use OutSystems themes such as Liverpool? You can do so while creating a new application, and then pick a template. If the theme is not installed yet, it is easily done by clicking "Get more..." or going to Forge to find these themes to install. After installing the theme and you still decide to change some of the button properties, it can be easily done from the Properties panel on the right side of Service Studio.


Once you've created the new application with the new themes applied, you can easily copy paste into your own FlashEnglish application screens. This way, you can save some time to customize the CSS.


Please refer to attached latest OML file with samples and let me know if more help is needed.

Thank you.

Regards,

Boney