Site logo

Archived topic

Classes for read more Buttons

1 reply · Started by Anwar on October 15, 2021

Viewing posts 1–2 of 2

I had used the CSS code below to style my buttons it's beautiful and nice kindly help with identifying the class so that I can keep using the same buttons for uniformity. I just need the Additional CSS class(es)

This is the code

a.read-more.button {
font-size: 18px;
background-color: rgba(255, 255, 255, 0);
color: #E65E03;
text-decoration: none;
background-image: linear-gradient( transparent 2px, #E65E03 2px, #E65E03 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
background-size: 0% 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding: 15px;
}

a.read-more.button:hover{
color:#115CFA;
background-size: 100% 6px;
background-color: #115cfa00;
}

Hi Anwar,

Not sure what you are looking for, are you trying to use the same style for all the buttons?

Buttons have different classes, give a.button a try, but if you only use this class, you might not be able to override the buttons' original styles, maybe try adding !important after the values, eg. font-size: 18px !important;

This archived topic is closed to new replies.