32
Views
6
Comments
Solved
Issues with Effects on Link and Span (Button)
Question

I create a button designed and animated on VS Code. It works. But when I tried to do the same with exactly the same CSS on Outsystems, the rendering is not working at all. Could you indicate me where I am wrong?

I would appreciate so much some help, please. (cf. the file)

Thank you.

Guillaume

Button_01.oml
2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

@Guillaume 

I have created the button for you, there were some changes that I've made in css and it is now working fine

I am attaching Oml Sample and Sample page link, Have a look at it

Link  - Sample

I hope this will helps

Thanks

Tousif

SampleButton.oml
2024-02-22 23-38-31
Rahman Brussolo

send a print of what you expect and how it turned out and the css code, because using your project just to visualize it, we have to request permission to use it, which will make it very difficult to get an answer.

2022-07-26 07-14-23
Guillaume Le Devin

Thank you for you answer.

It is possible to see the rendering in this 5mn Youtube's tutorial.:

https://www.youtube.com/watch?v=w0V4HAYYCbU&list=PL5e68lK9hEzd81JLjU2ey6WqODkKB2xFF&ab_channel=OnlineTutorials

2022-07-24 08-50-37
Gokula Kannan P

Hi @Guillaume Le Devin ,

I have checked your OML. some CSS properties are incorrect.

a{

    position: absolute;

    top: 50%;    left: 50%;

    transform: translate(-50%, -50%); 

   color: #1670f0;

    padding: 30px 60px;

    font-size: 30px;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    box-shadow: 0 20px 50px rgba(0,0,0,0.5);

    overflow: hidden;

}

Previous:

background: linear-gradient(to right #0c002b, #1779ff);

Valid fix ( missed comma after the direction. likewise all places in linear gradient)

background: linear-gradient(to right, #0c002b, #1779ff);


I hope this solution help you to fix the issue.

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

@Guillaume 

I have created the button for you, there were some changes that I've made in css and it is now working fine

I am attaching Oml Sample and Sample page link, Have a look at it

Link  - Sample

I hope this will helps

Thanks

Tousif

SampleButton.oml
2022-07-26 07-14-23
Guillaume Le Devin

Thank you so much.

It works perfectly.

:-)

2023-10-21 19-42-11
Tousif Khan
Champion

You're welcome, 

 Glad to help you :)

 Kind regards,

Tousif khan


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.