Circular customized buttons

0
I want to make a customized circular button and when I click it , it must show 2 colors in a single button. how to do that in mendix studio pro ? i'm using the latest version of mendix studio pro.  
asked
2 answers
0

You need to use css and create a circular button class with the correct designing properties then you can use it throughout the system. Mendix uses sass document where you can code your styling.

 

Please consider following these learning paths first:

https://academy.mendix.com/link/paths/123/Style-your-App-with-Sass 

https://academy.mendix.com/link/paths/125/Define-Your-App-Design

https://academy.mendix.com/link/paths/135/Implement-a-Design-System

 

For the code of a circular button you can use google here some examples I found by googling 'round button':

https://alvarotrigo.com/blog/css-round-button/

https://www.webcodzing.com/circle-buttons-css/

answered
0

Use classes and CSS for that.

Put the class (e.g. my-cicular-button) on your button in the appearance tab. Then in your scss files, write the styling. You could use the :active selector and a linear-gradient:

 

.my-circular-button {

    border-radius: 50px;

    background-color: green;

    &:active {

        background: linear-gradient(red, red 50%, blue 50%, blue);

    }

}

answered