Responsive Buttons - Ideally as a Class

Support
#1

I made this example page to illustrate what I am trying to do. The upper section is typical with white text and button, and is working fine. The button is responsive and stops getting smaller on mobile and stops getting bigger on very large screens (although I disabled to debug).

The trouble is on very light images I need to invert it to a black button. I thought I would simply add a class .btn-black and apply it to the white button (which is a redefined x-btn.) It works perfectly in the builder, but does not work once published. I guess I’m not targeting the button properly? This would be the ideal way to handle it as it is most flexible, elegant, and efficient.

Next, I tried using a new X Theme button. I got this to work except for the responsiveness. Also, I don’t believe it would be globally editable in this approach?

Finally, I made a button with HTML in a content area. I did not bother to add the big & small responsiveness, but easily could since styling is class-based. Maybe this is the way to go? I have never used content areas. Is there a better element to hold the CSS if this is the recommended approach?

Any thoughts or hints would be most welcome!

#2

Hi @ErgoArchitecture,

I checked and can see that your custom css code are not correct.

.btn-black .x-btn.x-btn-global {
    color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: 0.05em 0.05em 0.05em rgba(255, 255, 255, 0.5)!important;
    border: .15vw solid rgba(0, 0, 0, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.25) !important;
}

There should be no space in .btn-black .x-btn.x-btn-global

Please change your code to this.

.btn-black.x-btn.x-btn-global {
    color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: 0.05em 0.05em 0.05em rgba(255, 255, 255, 0.5)!important;
    border: .15vw solid rgba(0, 0, 0, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.25) !important;
}
```
Do the same for the hover

```css
.btn-black.x-btn.x-btn-global:hover {
    color: rgba(0, 0, 0, 1) !important;
    text-shadow: 0.05em 0.05em 0.05em rgba(255, 255, 255, 0.5) !important;
    border: .18vw solid rgba(0, 0, 0, 1) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.25) !important;
}
```

With regards to the button responsiveness, you are having issues  because of this code

```css
.x-btn {
    font-size: 1.3rem !important;
}
```
**rem**	Relative to font-size of the root element - https://www.w3schools.com/cssref/css_units.asp

Kindly remove it or change it to px so that your buttons will stay as is in desktop and in mobile.

For example

```css
.x-btn {
    font-size: 15px !important;
}
```

Hope this helps
#3

Thanks Paul!

I could have sworn I tried the classes with dots instead of spaces since that was how it appeared when I inspected it, but it didn’t work in the builder. Perhaps I did not wait long enough for the change?

The responsiveness is working fine on that button (we are using rem consistently throughout for strategic reasons); it was the second button that we couldn’t get it to work on because I couldn’t figure out how to attach media calls without classes.

I appreciate the help though, and since you have solved the main problem I don’t need a workaround any more anyhow!

#4

You are most welcome!
We’re glad @Paul.r were able to help you out.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.