Button with Link Styling Broken

"Color" interface is not working when button have "Link". As seen in the screenshot, the html code has class="blue ui button" but display shows a shading gray color.
​

Hi
​
I prefer do not use Behaviors/Color. So, all buttons classes are always "ui button", without blue or green…
​
I use a View Element/Custom/Css with something like this...
.ui.button, .ui.button:active, .ui.button:focus { width:120px; color:white; border:1px solid #55bd97; background-color:#55bd97;}
.ui.button:hover {background-color:white;color:#55bd97;}
​
So I can choose colors that I want.
​
And I think that, if you use a Link and not Submit Next Page, it's better to choose button type=Button and not Submit.

Thanks for the pointer.
​
I don't want a global change of all buttons' color and style. Is there anyway to append a class to this field so that the change will be specified? I have a hard time figuring out how to add class name. It was a feature in v6 but now I am lost without being able to do that. I am not a programmer and have very minimal coding skill.

You can use Behaviors/Interface/HTML TAG Attributes
Then add an Attribute = class, Attribute value = my_class, Append
​
You also can add an Id:
Attribute = id, Attribute value = my_id, Append or override
​
So you can modify rule for only one button
#my_id.ui.button {css rules}
​
Another way:
Attribute = style, Attribute value = color:green;background-color=yellow;, Append
​
But in this case, you can't modify button:hover, button:focus, button:active

Thank so much for the information.
​
The HTML Tag attributes do not seem to be able to override the button style if "Link" is used.
​
I tried overriding the class name and use css to style the button, only some attributes work, padding/margin but color/border/background-color are not working.

Hi
​
Sure, it's working.
Use a CSS View like I said...
Do not use color, then use a Custom CSS Element:
.ui.button, .ui.button:active, .ui.button:focus { width:120px; color:white; border:1px solid #55bd97; background-color:#55bd97;}
.ui.button:hover {background-color:white;color:#55bd97;}
​
If its don't work, said me exactly what you want in your button link...

Thanks, Colnem. It was my mistake putting the css at the wrong page. Thanks for your help!

After testing again, I find the font-color works but radius and background-color does not. I used exactly your code in the css. For your clarification, this happens when the button is assigned with "Link" interface.

Look at this...
​[file=https://olympe-retraite-sportive.com/form.zip]https://olympe-retraite-sportive.com/form.zip[/file]

Thanks for taking the time to show me. I discover the underlining issue is that Safari does not display the custom css correctly. When I use your demo in Chrome, it shows correctly the custom color and border.
​
I will try adding webkit extension to see if the Safari will display the custom css.

Try to add !important for each rule...