hi
I have added a button to my homepage in Pro, but seem unable to style this one. I added a custom class of review-btn to it and the following CSS
.review-btn .x-btn:before {
transition: color 0.4s ease-in;
}
.review-btn:hover .x-btn:before {
color: #fe5000;
}
Not 100% the CSS is right. It is the same as for an icon I used and just changed x-icon to x-btn and added my custom class, but no transition occurs
Regards
Hi @guybower1,
The Button element does have interaction options that might be of help for your need and you might have no need for the CSS Transition.
Whenever you see a color palette for Interaction it means you can use it to change the color on hover. Also, it worths checking the particle settings in the article above as it gives much more flexibility.
I also suggest that you get familiar with our Elements class/ID structure:
Finally, I would use the Google Chrome developer toolbar to get exactly what is the correct selector whenever I need one. For more information:
If you still need our help, please kindly get back to us with the URL of the page that the button is in and more information and we will check it for you to suggest the correct selector.
Thank you.
hi Christopher
A comprehensive reply as always, so thank you very much.
Yes, I knew the button had a hover colour to be accessed using the button setup, but it does not seem to have any transition control, so was hoping to make it a more smooth transition. I did this earlier with some star icons I used and it is nicer than just a sudden colour transition.
On checking the developer tools, the element I need to affect is the .x-anchor-text-primary and the custom class of that particular button is review-btn
I have tried many combinations to try and get this to work, with nothing showing any result
Here was one combination I tried to get the primary button text to change colour, but to ease in. Yes I know the colour change can be done using the button setup itself, but there is nothing to be learned by me by doing it that way for this exercise. If I do the colour change that way, all I will be looking to do is have the transition time work correctly. I was trying to do the colour change manually so I learned which element would actually control that primary text, if that makes sense, but have not been able to find the right way yet. It would be simple enough to remove the CSS colour change and do it via the button setup once the transition is set.
Here was one try:
.x-anchor-text, .x-anchor-text-primary.review-btn:before {
transition: color 0.4s ease-in;
}
.x-anchor-text, .x-anchor-text-primary.review-btn:hover .x-anchor-text-primary.review-btn:before {
color: #fe5000;
}
Any suggestions on what I am doing wrong there?
Regards
Oh by the way, I also tried to change the custom Class to a custom ID, since the only time it will be used is for this button. I then used button#review.btn to try and target it for styling, but still no result
Regards
Hi @guybower1,
Thank you for the details.
Usage of before on your custom CSS is wrong. Please check this documentation to understand better.
To understand how to combine class, this article will help you.
Discussing CSS is a large topic. I will be focus on your CSS why it is wrong by showing you the structure. Here is the button structure:
First, you are using review-btn as ID. So we are using # instead not dot (.)
See this: https://www.w3schools.com/css/css_selectors.asp
Next, x-anchor-text-primary class is inside the review-btn container so we will add it on the selector by adding space.
#review-btn.x-anchor-text-primary withour space means that both ID and class exists on the same element which is wrong. .x-anchor-text-primary is actually a child of a container with id #review-btn so correct syntax is this with space #review-btn .x-anchor-text-primary
No need to use before because there is no before pseudo element on the button structure. It would be like this:
#review-btn .x-anchor-text-primary{
transition: color 0.4s ease-in;
}
CSS to add hover color is also wrong. Because of above reasons. It would be best to add the hover color on the structure because we add it using x-interactive class not using hover option. See this: https://screencast-o-matic.com/watch/cYfDj2zYhD
Please review all the documentation above. It will help you better understands the specific.
hi Lely
Thanks so much for your detailed reply. I had read quite a few of those articles on the subject before posting, but it is still quite a grey area as to which class or ID to target. I was certainly able to see the classes in the developer tools, but it was the actual structure of the CSS which got me, so thank you for that.
Initially I had the button with a custom class, so I used .review-btn, but without results, then I changed it to a custom ID and used #review-btn. I tried so many different variations of it, but I never had the container on its own at the beginning; that was my mistake.
So if it had remained as a custom class, I would have simply used the .review-btn .x-anchor-text-primary option; is that correct? That is probably the only thing I did not try; putting the container first. That will help me a lot in future.
My main reason for leaving the hover colour part in was just so I would know when I had successfully target the correct class/ID, if that makes sense.
Oh, and the reason the use of before was I copied the CSS from some star icons I put in that same sections.
Thanks so much. I always appreciate learning a little more on these queries and try to experiment as much as possible before posting
Take care
Hi @guybower1,
You’re always welcome!
Yes, that is correct.
You are on the correct path. You just need to understand the structure more and selector groupings and combination. This might also help:
https://www.w3schools.com/css/css_combinators.asp
There are so many ways to target an element. More than using correct selectors are using more specific selectors. There are times that you are using correct selectors but it is not working. Possible reason might be a more specific selector was taking place. Be aware of that. You can review this:
https://www.w3schools.com/css/css_specificity.asp
Cheers to your development… 
Hi again Lely
May I ask 2 very specific questions re exactly what we were discussing?
Firstly, I tried to do the same thing as I did with the primary text element to the border colour of the button. Since it is still using custom ID review-btn, I know it starts with #review-btn I also experimented with the element until I could control the background colour (that’s not what I wanted, but it meant I was targeting the correct element).
So the element which worked to change the background to background-color: #000; was #review-btn .x-anchor-content yet when I added the same transition line to this, it made no difference.
I also tried adding border-color: #fff; just to see if this would make the border change, but there was also no result
I looked closer in developer tools and saw that quite possibly the main container for the button was either .x-anchor or .x-anchor-button. I tried both together like this .x-anchor.x-anchor-button and reversed them as well then also did them individually and none of those could control the background colour, so I felt confident I had the right element with .x-anchor-content.
So my questions would be, 1) how can the background & border colour of the same button be controlled by using different elements? Are not the background colour and border colour parts of the one single button?
2) Why does the transition effect not control the border transition? I am guessing because the correct element is not targeted yet, which is frustrating.
Here is what the developer tools shows re the button border colour and it clearly shows .x-anchor
Here is a screenshot showing the other element mentioned .x-anchor.x-anchor-button
Here is another screenshot of all elements shown together
I have done a mountain of reading, but there seems no logical reason why what I’ve tried does not work. I completely grasped what you mentioned re the primary text and it made sense, so I proceeded the same way and have hit a brick wall. I cannot see a more specific selector at play here.
This may seem rather simple to you, but when the only possible options are all in front of you and no combination of them achieves the desired goal, it is quite deflating.
Cheers Lely
Hi @guybower1,
I would answer your question here but moving forward you might need to consult a web developer for this. As much as we always wanted to help this is really beyond the scope of our support since this a customization. As stated earlier, CSS is a very large topic and it will take time to understand everything.
As you can see on my previous screenshot about the button element, and it is the same for other elements, it is a combination of different tags and elements. Inside the link tag a(main wrapper of the element) there are many containers/elements. This is because the button element is a combination of primary text, secondary text, graphic and particles. When you inspect the settings, each of those have style options.
Borders are part of the main container link tag. On the other hand, font color are part of the primary text part which is just a child of the main container link tag.
Yes you are correct that correct element is not targeted using previous CSS. The transition is added on text element container while the border is added on the main container as explained above.
Hi Lely
Thanks again for your reply, but I am very much doubting that any developer would get out of bed for a job involving changing a border colour transition on a button. It will turn out to be pretty simple in the end, but a process of elimination which takes time. I wasn’t actually after the magic answer per se; more a guide on elements and in the end, which you pointed me towards; I found the element which controls the button border colour through this process.
You may possibly have misunderstood what I was talking about, though Lely, as I am not actually trying to put a different border around the button, either initially or on hover. I was merely using that process to guide me as to when I was selecting the correct container/element to place the border colour transition on, if that makes sense.
Incidentally, the background colour of that button can be changed by using either #review-btn .x-anchor-content or #review-btn .e13726-139, .x-anchor.x-anchor-button, so I am still at a loss to see how there is a great deal of logic in that; to be able to work either way seems at odds with logic to me, but nevertheless, it works either way.
Now through a process of elimination, I have now worked out how to change the border colour of the button and also change it on hover should I need to, with the addition of the .e13726-139 container, as indicated above. Now that I know I am targeting the border colour element correctly, this should mean I am now targeting the correct container/element for the border colour transition; would that be correct, or is the border colour transition not controlled by the same element which controls the border colour?
I am so close now, but the transition still refuses to work with the following code
#review-btn .e13726-139, .x-anchor.x-anchor-button {
transition: color 0.4s ease-in;
}
yet this same element controls the border colour. You indicated that “Borders are part of the main container link tag”, so not sure why the above works to change button border colour if I add the border colour tag , but does not change button border colour transition. You did indicate that “The transition is added on text element container”, but I assumed you were referring to the transition we placed on the primary text element. I have tried variations on the above, naturally, but have not gone down any further than the .x-anchor-content container, as below that is simply the container holding the primary text and we have already targeted the primary text for transition earlier. The container above all of this is the actual column container, so I fail to see how that would control it.
I’ll understand if you’re done on this one. Thanks very much for your time. I have picked up some things along the way and very close to having this resolved
cheers
Hi @guybower1,
We do encourage user to get in touch with a developer for customization be it a big or small one because developers should be able to accomplish customizations. Customizations being those features/effect that require custom codes to achieve just like what you are currently doing since we cannot provide support for it since it is beyond the scope of our support. Also, if it is something that goes beyond your familiarity, and if you are trying to get it sorted in a timely manner, it’s best to seek help from a developer.
As for the button that you are working on, you got this markup:
The code you have written is using an incorrect selector: #review-btn .e13726-139 this would mean you are trying to target the class e13726-139which should be inside the ID review-btn. In the markup, you could see that #review-btn and .e13726-139 are pointing to the same element.
You can just try to use #review-btn and add the transition to that button then add the hover effect to the same selector for the transition to work.
It would be help if you check out and make yourself familiar with CSS selectors because we can’t afford to give full information and explanation about what and how CSS codes work. Here are some links that might help:
Please also check this link to understand how CSS transition works:
Hope this helps.
hi Jade
Thanks so much for your reply.
Yes absolutely, though you do understand the frustration when that selector you mentioned, #review-btn .e13726-139, .x-anchor.x-anchor-button DOES change the border colour of the button, but does NOT handle the border colour transition; that just seems odd. The other odd thing to a novice is exactly the same transition on the button’s primary text needed no hover added for it to work flawlessly.
Thanks so much, I will keep playing with it, but even just the simple use of the review-btn selector gives no result nor alternatively using the e13726-139 selector
#review-btn {
border-color: #fe5000;
transition: color 2s ease-in;
}
#review-btn:hover {
border-color: #fff;
transition: color 0.5s ease-out;
}
That link on CSS transitions is interesting as well, so thanks again
Regards
Hey @guybower1,
The attribute you are using in the transition is just color. You must include border color as well.
#review-btn {
border-color: #fe5000;
transition: color 2s ease-in, border 2s ease-in;
}
#review-btn:hover {
border-color: #fff;
transition: color 0.5s ease-out, border 0.5s ease-out;
}
You can check out this documentation:
hi Ruenel
Ah, so the word border needed to be in the transition settings. Close, but no biscuit, as the say. I thoughT that addressing the border with the border-color would have sufficed
Great to be learning, though. I am coming to grips with selectors and now, hopefully, I will start to be more aware of setting any transitions.
Thanks so much and that now is perfect and I can play with timings
I would assume there would also be a site wide way to have the same transition timings on all hoveF effects, but that is certainly not a priority and I will research it
Take care and thanks again
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.