CSS utility library overrides my button style?
I'm trying to style a button by writing my own css but also using Tailwind for other styles.
My code for the button is as follows but some of the elements are crossed out.
button {
margin-left: 10px; /*crossed out*/
padding: 5px 25px; /*crossed out*/
background-color: rgba(2,68,62,1); /*crossed out*/
border: none;
border-radius: 10px;
cursor: pointer; /*crossed out*/
transition: all 0.3s ease 0s;
}
Is it because Tailwind already has default values for button
? I know using !important
is bad practice so how do I fix this? My html for the cta button is:
<a class="cta" href="#"><button>CONTACT</button></a>
If I reference .cta
in my css, I can't change the actual CONTACT text; I wanted to use text-decoration: none
.
I did set a *
at the top of my css.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #b3b3b4;
}
from Recent Questions - Stack Overflow https://ift.tt/3cChsWc
https://ift.tt/eA8V8J
Comments
Post a Comment