I read you can add css as you’d like, but can’t find how to do it. I only see basic css attributes to edit, like color and font style. How can I add pure css in the visual studio to apply to an element (in case it matters, I need to add before and after pseudos to create an on hover effect to some images)? Thank you
Hi @tricky_hoverfly! You can find the CSS Embed in the Add menu, and then you can write CSS in the Project Settings tab - for example, you can add new CSS classes and use these classes in the className
HTML attribute of the elements that need those styles
Thanks! And how do you edit the className? Does it have to be in code?
Yes
Hi @sarah_ahmed , thank you for your answer. Could you please explain further? I understand that if I am developing new custom components I should add the proper classNames. But if I want to re-style buttons, text fields, fonts, etc?
Thanks a lot
You can use the Design tab to add styles. I hope that answers your question, or am I missing something?
What I want to do is add (or even better,replace) the className of interactive elements such as buttons, textInputs, etc. Ideally, be able of set a new, fresh className to not override CSS styles. I want to import customCSS code through the embedCSS settings and re-style a button completely with my own styles, such as in this code:
.myButton {
padding: 12.5px 30px;
border: 0;
border-radius: 100px;
background-color: #2ba8fb;
color: #ffffff;
font-weight: Bold;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.myButton:hover {
background-color: #6fc5ff;
box-shadow: 0 0 20px #6fc5ff50;
transform: scale(1.1);
}
.myButton:active {
background-color: #3d94cf;
transition: all 0.25s;
-webkit-transition: all 0.25s;
box-shadow: none;
transform: scale(0.98);
}
Thanks,
You should be able to achieve this as explained by @victor in the thread above:
You can find the CSS Embed in the Add menu, and then you can write CSS in the Project Settings tab - for example, you can add new CSS classes and use these classes in the
className
HTML attribute of the elements that need those styles
How can this be done? That was the question in the fisrt place. I don’t know if I am missing something but I can’t find the HTML attribute in any interactive element, such buttons or input texts.
This is a section:
And this is a button:
Thanks,
Hi there @sarah_ahmed,
anything else I can do to explain myself better? Could I get a hand from you?
Thanks a lot,