I’m running into an issue where I want to apply some custom transition styles for text links but since the default button styles rely on the standard a selector and styles are getting added to buttons as well.
What’s your recommendation for preventing the text link styles from applying to buttons?
Page where text styles applying as intended: https://hoytartcenter.wpengine.com/
Page where buttons are impacted: https://hoytartcenter.wpengine.com/creativeplay/
Here’s the existing CSS:
#main a {
text-decoration: none;
padding-left: 0.125em;
padding-right: 0.125em;
padding-bottom: 0.05em;
border-bottom: 0.0625em dotted #AC2016;
position: relative;
}
#main a::after {
content: '';
position: absolute;
top: 100%;
border-bottom: 0.125em solid #00AA00;
transition: all 0.35s;
left: 0;
right: 100%;
}
#main a:hover::after {
transition: all 0.35s;
right: 0;
}