Change Button Color with CSS

Hello,
To begin, I want to extend my heartfelt apologies for the delayed reply, which is due to an unexpectedly high volume of inquiries.
We truly value your patience during this period.

When you create a URL Link column and set it to appear as a button, first add a custom class to it ( as you already did in your case) :

In our example, we named the class “customclass”, but you can use any other name, of course.

Then, visit this website, generate your button, and click on “Get Code”:

In the right part of the screen, you’ll see the code you need for this button:

Copy the code without the first row and change the class name from “myButton” to your class name which you added in step 1, so instead of this:

.myButton {
	background-color:#51d1c6;
	border-radius:28px;
	border:1px solid #1995ab;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
	background-color:#5a9615;
}
.myButton:active {
	position:relative;
	top:1px;
}

In our example we will use the “customclass”:

.customclass {
	background-color:#51d1c6;
	border-radius:28px;
	border:1px solid #1995ab;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.customclass:hover {
	background-color:#5a9615;
}
.customclass:active {
	position:relative;
	top:1px;
}

In the Lite wpDataTables version, you won’t have the “Customize” setting for each Table ( that is only available in the Premium version), so you need to add the CSS in the main plugin settings/Custom JS and CSS/Custom CSS :

Notice that the font color had to include the !important clause to override the color of the text in the button.

So check if your text/font color does not apply, then you  can just add the !important clause in your CSS for that line ( color : white !important).

After you add this, the button in the table will look like this:

So, adding this CSS with that class in your ‘global Plugin settings’ means that for any Table that has that CSS class added to a button, it will be affected by those styles.

I hope this helps.

Kind regards.