How to add custom CSS to your project?

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

image.png

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,