# CSS code and perspective behaviour

**URL:** <https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 20, 2025, 3:01pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625 "2025-02-20T15:01:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 20, 2025, 3:01pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/1 "2025-02-20T15:01:06Z")

</div>

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](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.

```python
.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.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 20, 2025, 3:13pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/2 "2025-02-20T15:13:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 20, 2025, 3:21pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/3 "2025-02-20T15:21:24Z")

</div>

> [@Benjamin\_Furlani](#):
>
> you would need to specify psc-icon and psc-text I believe since you are doing the child selector.

Forgive me, what do you mean?

> [@Benjamin\_Furlani](#):
>
> also make sure your text and icon have the text and icon classes applied to them

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

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 20, 2025, 3:25pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/4 "2025-02-20T15:25:50Z")

</div>

> [@Aiasa21](#):
>
> Forgive me, what do you mean?

for example:

```CSS
.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:

```CSS
.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

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 20, 2025, 3:34pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/5 "2025-02-20T15:34:16Z")

</div>

I understand, so I modify the code according

```python
.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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d56b21a48f20b468772bc56a8c442aa7a125307d.png)

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

What do I wrong?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 20, 2025, 3:51pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/6 "2025-02-20T15:51:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 20, 2025, 3:59pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/7 "2025-02-20T15:59:16Z")

</div>

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

> **Flex Container JSON**
>
> ```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": {}
> }
> ]
> }
> ]
> 
> ```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/ccf2cd0a2ad830e171597fafd802c8673fc1b71a.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e1bbc7767cc2e7306fe806fe4ccbb486f5f8c36b.png)

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 21, 2025, 6:49am UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/8 "2025-02-21T06:49:20Z")

</div>

> [@Benjamin\_Furlani](#):
>
> I used a flex container with a button and an icons component.

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?

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [February 21, 2025, 2:44pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/9 "2025-02-21T14:44:42Z")

</div>

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**
>
> ```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**
>
> ```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.

---

<div class="post-metadata">

**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\
**Post date:** [February 21, 2025, 3:16pm UTC](https://forum.inductiveautomation.com/t/css-code-and-perspective-behaviour/102625/10 "2025-02-21T15:16:56Z")

</div>

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

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