- This topic has 7 replies, 3 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 1, 2019 at 7:00 pm #1088730Sanu Kumar
how to add some hover effects on the sidebar under the “KNOW MORE” which is of yellow colour on my blog.
Plz, give me the CSS of its gradient colour also. Any gradient colour which you like I don’t.. have any problem with that.
ThanksDecember 1, 2019 at 7:11 pm #1088747LeoStaffCustomer SupportHi there,
“Some hover effects” is a little vague for us to provide the code.
Can you provide an example of what you’d like to achieve?
Then we should be able to just copy the code.
Let me know 🙂
December 1, 2019 at 8:00 pm #1088784Sanu Kumarlike in generate press theme….when we take our mouse cursor to the search tab…it becomes blue, when we remove mouse cursor it becomes white…. the same thing I would like to do in the sidebar under “know more” tab.
I want its gradient colour as well…anyone you can provide the colour, I would accept but it should look goodDecember 2, 2019 at 3:26 am #1089240DavidStaffCustomer SupportHi there,
sorry still a little unclear do you want to change the Background Color of the Know More Button or the Related Posts list below it?
December 2, 2019 at 3:44 am #1089275Sanu Kumarthe background colour of know more button nd adds hover effects.
December 2, 2019 at 4:23 am #1089326DavidStaffCustomer SupportFirst thing is to remove the inline styles from the button you have added, the HTML inside the widget should look like this:
<a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a>
We can then target the button with this CSS:
/* Know More button */ a.button.know-more { background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(249,203,51,1) 74%); border-image: initial; border-radius: 50px; color: #303030; cursor: pointer; display: inline-block; font-size: 22px; margin: 3px 1px 0px; padding: 7px 25px; text-decoration-line: none; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; border: 1px solid inherit; } /* Know More Hover */ a.button.know-more:hover { background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(190,0,50,1) 74%); color: white !important; }
You can change this in the Hover CSS to whatever you need:
background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(190,0,50,1) 74%);
This site is great for creating gradients:
December 2, 2019 at 4:42 am #1089367Sanu Kumarit works but it is not in the centre…how to put it in the centre
December 2, 2019 at 6:45 am #1089600DavidStaffCustomer SupportIn you’re HTML you’re anchor link is wrapped in a <p> tag ie.
<p><a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a></p>
Edit it to include
align-center
ie.<p class="align-center"><a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a></p>
Then add this CSS:
.align-center { text-align: center; }
-
AuthorPosts
- You must be logged in to reply to this topic.