I'd like to have a regular button similar to what's shown on the Salient demo site, but when I use the regular one, it adds animation that I'd like to remove. The screenshots show how the button looks without and with hover. I'd like to remove the sliding animation but I can't seem to target the translation css to get it right. I'd also like to just adjust the settings if there's an easier fix.
Do you have any tips for controlling the icon position? I want to use icons after the words, but the word lengths aren't always the same, and I don't know if there's a global way to make that work.
Did you see the screenshots I shared? I would like the icons to appear about 16px to the right of the last character of button text. Does that make sense?
That's close, but I'm needing to have it 16px to the right of the text, not 16px from the right side of the button box. Is that possible? With the different lengths of text, it varies a bit more.
Hmm, that does the same thing. Is it possible to make the icon show 16px to the right of the button text? Here's a screenshot where the lighter pink box suggests the space between the button text and the icon.
Add this Custom CSS to remove the icon animation and keep it at the same position .
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-button.has-icon:hover i, .nectar-button.tilt.has-icon i, body.material .nectar-button.has-icon i {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
}
Of course. I'd like the icon to display 16px to the right of the button text. Some button text is shorter and some is longer, so it's difficult to set it in the same position based on the length of text. I've attached a screenshot based on the design I've been working on showing two buttons with different lengths of text.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I'd like to have a regular button similar to what's shown on the Salient demo site, but when I use the regular one, it adds animation that I'd like to remove. The screenshots show how the button looks without and with hover. I'd like to remove the sliding animation but I can't seem to target the translation css to get it right. I'd also like to just adjust the settings if there's an easier fix.
Hi There,
Please try this css:
.nectar-button.has-icon:hover span, .nectar-button.tilt.has-icon span, body.material .nectar-button.has-icon span {transform: none;
}
Thanks.
Perfect, thank you!!
Do you have any tips for controlling the icon position? I want to use icons after the words, but the word lengths aren't always the same, and I don't know if there's a global way to make that work.
(Examples attached)
Hi There,
How do you want the icons to look or behave, please let us know.
Thanks.
Did you see the screenshots I shared? I would like the icons to appear about 16px to the right of the last character of button text. Does that make sense?
Hi,
It does make perfect sense.
Please try this css:
.nectar-button i, .nectar-button i[class*="fa-"] {
right: 16px;
}
Thanks.
That's close, but I'm needing to have it 16px to the right of the text, not 16px from the right side of the button box. Is that possible? With the different lengths of text, it varies a bit more.
Hi There,
You can as well try this css:
[class^="icon-"].icon-3x.extra-color-gradient-2:not(.alt-style), [class*=" icon-"].icon-3x.extra-color-gradient-2:not(.alt-style), [class^="icon-"].icon-3x.extra-color-gradient-1:not(.alt-style), [class*=" icon-"].icon-3x.extra-color-gradient-1:not(.alt-style), body:not(.material) .nectar-button i, body.material:not([data-button-style^="rounded"]) .nectar-button i {margin-right: -16px !important;
}
Thanks.
Hmm, that does the same thing. Is it possible to make the icon show 16px to the right of the button text? Here's a screenshot where the lighter pink box suggests the space between the button text and the icon.
Hey Again,
Add this Custom CSS to remove the icon animation and keep it at the same position .
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-button.has-icon:hover i, .nectar-button.tilt.has-icon i, body.material .nectar-button.has-icon i { -webkit-transform: translateX(0px) !important; transform: translateX(0px) !important; }Thanks
ThemeNectar Support Team
Also remove the negative margin CSS code as that's not required.
Thanks
ThemeNectar Support Team
Thank you. That's getting it a little bit closer. Is it possible to get the icon to display right after the button text rather than :before?
Not sure I understand the Icon is showing after the Text?. Could you elaborate further?.
Thanks
ThemeNectar Support Team
Of course. I'd like the icon to display 16px to the right of the button text. Some button text is shorter and some is longer, so it's difficult to set it in the same position based on the length of text. I've attached a screenshot based on the design I've been working on showing two buttons with different lengths of text.
Edit*
Hey Again,
Thanks for the Screenshot.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-button i, .nectar-button i[class*="fa-"] { position: relative !important; top: 1px !important; right: 0px !important; }Thanks
ThemeNectar Support Team
Perfect!!! Thank you so so much.