CSS code and perspective behaviour

Aiasa21 · February 20, 2025, 3:01pm

Good afternoon,

I'm trying to apply a style to a button to create something like this:
https://uiverse.io/cssbuttons-io/stupid-impala-51

I simply pasted the code into the advanced stylesheet.css, adding .psc- before all the button selectors.

.psc-button {
 width: 150px;
 height: 50px;
 cursor: pointer;
 display: flex;
 align-items: center;
 background: red;
 border: none;
 border-radius: 5px;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
 background: #e62222;
}

.psc-button, .psc-button span {
 transition: 200ms;
}

.psc-button .text {
 transform: translateX(35px);
 color: white;
 font-weight: bold;
}

.psc-button .icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.psc-button svg {
 width: 15px;
 fill: #eee;
}

.psc-button:hover {
 background: #ff3636;
}

.psc-button:hover .text {
 color: transparent;
}

.psc-button:hover .icon {
 width: 150px;
 border-left: none;
 transform: translateX(0);
}

.psc-button:focus {
 outline: none;
}

.psc-button:active .icon svg {
 transform: scale(0.8);
}

The behavior isn't exactly the same as in the link, so I'm wondering if the "copy and paste" approach is correct, or if there are some adjustments needed in Perspective to achieve the intended result.

Benjamin_Furlani · February 20, 2025, 3:13pm

you would need to specify psc-icon and psc-text I believe since you are doing the child selector.

also make sure your text and icon have the text and icon classes applied to them

Aiasa21 · February 20, 2025, 3:21pm

Forgive me, what do you mean?

Thanks for the suggestion, I didn't do this.

Benjamin_Furlani · February 20, 2025, 3:25pm

for example:

.psc-button .icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

should be:

.psc-button .psc-icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

because the selector will be looking for children with a class of psc-icon after the page renders since all user applied style classes have psc- appended to them

Aiasa21 · February 20, 2025, 3:34pm

I understand, so I modify the code according

.psc-button {
 width: 150px;
 height: 38px;
 cursor: pointer;
 display: flex;
 align-items: center;
 background: red;
 border: none;
 border-radius: 5px;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
 background: #e62222;
}

.psc-button, .psc-button span {
 transition: 200ms;
}

.psc-button .psc-text {
 transform: translateX(35px);
 color: white;
 font-weight: bold;
}

.psc-button .psc-icon {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(110px);
 height: 32px;
 width: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.psc-button svg {
 width: 15px;
 fill: #eee;
}

.psc-button:hover {
 background: #ff3636;
}

.psc-button:hover .psc-text {
 color: transparent;
}

.psc-button:hover .psc-icon {
 width: 150px;
 border-left: none;
 transform: translateX(0);
}

.psc-button:focus {
 outline: none;
}

.psc-button:active .psc-icon svg {
 transform: scale(0.8);
}

I add the button class in the text and icon too

The button in render correctly now, but when I hover the only thing that happen is the background color change.

What do I wrong?

victordcq · February 20, 2025, 3:51pm

psc- is only for custom classes, the basic button classes dont have that.

The best way to know which selectors you need is to use your browsers inspector.

Also check the html page of your sample and compare the icon inside it to the structure perspective generates, it will be different

Benjamin_Furlani · February 20, 2025, 3:59pm

I used a flex container with a button and an icons component.

Flex Container JSON

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "style": {
        "classes": "text button",
        "overflow": "hidden"
      }
    },
    "meta": {
      "name": "FlexContainer"
    },
    "position": {
      "basis": "34px"
    },
    "custom": {},
    "children": [
      {
        "type": "ia.input.button",
        "version": 0,
        "props": {
          "textStyle": {
            "classes": "text"
          },
          "image": {
            "icon": {
              "style": {
                "classes": ""
              }
            },
            "position": "right"
          },
          "style": {
            "classes": "button"
          }
        },
        "meta": {
          "name": "Button"
        },
        "position": {
          "grow": 1
        },
        "custom": {}
      },
      {
        "type": "ia.display.icon",
        "version": 0,
        "props": {
          "path": "material/insert_emoticon",
          "style": {
            "classes": "icon"
          }
        },
        "meta": {
          "name": "Icon"
        },
        "position": {
          "basis": "30px"
        },
        "custom": {}
      }
    ]
  }
]

Aiasa21 · February 21, 2025, 6:49am

Good morning @Benjamin_Furlani, thanks for the code, I paste it in a new page and it works (without the smooth transaction of the icon to the left).

I see you use a separated icon, I actually set the icon in the button property., Should be possible to use it's own icon property instead having another component?

Could you kindly share you css code please?

Benjamin_Furlani · February 21, 2025, 2:44pm

I did some inspecting and the way that the icon is generated puts it on the g tag inside of the actual svg tag for the icon.

So if we make a few changes to use child selectors for just svg then we can apply our translations etc to that under the .button class

Updated CSS

/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/

.psc-button {

 cursor: pointer;
 display: flex;
 align-items: center;
 background: red;
 border: none;
 border-radius: 5px;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
 background: #e62222;
  
}

.psc-button, .psc-button span,.psc-button div {
 transition: 200ms;
}

.psc-button .psc-text {

 color: white;
 font-weight: bold;
}

.psc-button .psc-icon,.psc-button svg {
 position: absolute;
 border-left: 1px solid #c41b1b;
 transform: translateX(45px);
 transition: transform 0.3s ease-in-out;
 height: 32px;
 width: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.psc-button svg {
 width: 15px;
 fill: #eee;
}

.psc-button:hover {
 background: #ff3636;
}

.psc-button:hover .psc-text {
 color: transparent;
}

.psc-button:hover .psc-icon,
.psc-button:hover svg {
    width: 150px;
    border-left: none;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
   
}


.psc-button:focus {
 outline: none;
}

.psc-button:active .psc-icon,.psc-button:active svg {
 transform: scale(0.8);
 transition: transform 0.3s ease-in-out;
}

I am no longer using the flex container with two components instead I am just using the button with an icon setting setup.

Button Component JSON

[
  {
    "type": "ia.input.button",
    "version": 0,
    "props": {
      "textStyle": {
        "classes": "text"
      },
      "image": {
        "icon": {
          "path": "material/insert_emoticon",
          "style": {
            "classes": "icon"
          }
        },
        "position": "right"
      },
      "style": {
        "classes": "button",
        "width": "200px",
        "height": "35px"
      }
    },
    "meta": {
      "name": "Button"
    },
    "position": {},
    "custom": {}
  }
]

It isn't one to one with your example link, but I think you can take it from here to fine tune it.

Aiasa21 · February 21, 2025, 3:16pm

This is perfect, of course I start from here to make some update.

Thank you very much for your time, have a nice weekend.