The User Interface can be styled via CSS. CSS is a standardized web style sheet language used for describing the presentation of HTML documents and its objects and elements.  The good thing is that every web site has its CSS descriptions so it's an advantage if interfaces shall inherit a CI conformity.  

 

All things CSS can be found at MDN Web Docs:    

https://developer.mozilla.org/en-US/docs/Glossary/CSS  

Or at W3schools:
https://www.w3schools.com/css/default.asp

 

SASS:
Pixera Control Web Server can parse SASS which is an extension for CSS. Get all details here:
https://sass-lang.com/  
 

There are lots of other resources out there.  

One of my favorites is: https://www.bestcssbuttongenerator.com if you need some fancy button styling.  

 

If you download and use complete CSS files out of the web be aware that this can interact with all of Pixera Control stylings. Please follow these guidelines:
 

    Declarations need to start with a dot  

    Use unique declarations like .myButtonGreen

    Be aware to use the body or html or any other html like declaration as this will definitely influence ALL stylings

    Don’t use declarations when inputting CSS code in the style input field please see:UI Input Field - Style  

 

 

 
DON'T DO SOMETHING LIKE THIS:

body {

padding: 0;

margin: 0;

display: flex;

background-image: linear-gradient(135deg, #0042D9 0%, #0093FF 60%, #0078FF 100%);

}

 

button {

cursor: pointer;

position: relative;

padding: 2.5rem 7.5rem;

border-radius: 3.75rem;

line-height: 2.5rem;

font-size: 2rem;

font-weight: 600;

border: 1px solid #012880;

background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);

box-shadow: 0 1rem 1.25rem 0 rgba(22,75,195,0.50),

0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,

0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,

0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset;

}  

If you want the button styling then please change to something like:

MyFirstButton {

cursor: pointer;

position: relative;

padding: 2.5rem 7.5rem;

border-radius: 3.75rem;

line-height: 2.5rem;

font-size: 2rem;

font-weight: 600;

border: 1px solid #012880;

background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);

box-shadow: 0 1rem 1.25rem 0 rgba(22,75,195,0.50),

0 -0.25rem 1.5rem rgba(110, 15, 155, 1) inset,

0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,

0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset;