Custom buttons with Revolution Slider

Hi Andres,

If you already have the button in place I can get you a custom CSS to modify it.

Do you have a public URL where we can take a look at this ? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

Let me know

Hi Andres,

You can change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

a.tp-button{
	-moz-box-shadow: 3px 4px 0px 0px #1564ad !important;
	-webkit-box-shadow: 3px 4px 0px 0px #1564ad !important;
	box-shadow: 3px 4px 0px 0px #1564ad !important;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)) !important;
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%) !important;
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%) !important;
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%) !important;
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%) !important;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%) !important;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0) !important;
	background-color:#79bbff !important;
	-moz-border-radius:5px !important;
	-webkit-border-radius:5px !important;
	border-radius:5px !important;
	border:1px solid #337bc4 !important;
	cursor:pointer !important;
	font-weight:bold !important;
	padding:12px 44px !important;
	text-decoration:none !important;
	text-shadow:0px 1px 0px #528ecc !important;
}
a.tp-button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff)) !important;
	background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%) !important;
	background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%) !important;
	background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%) !important;
	background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%) !important;
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%) !important;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0) !important;
	background-color:#378de5 !important;
}
a.tp-button:active {
	position:relative !important;
	top:1px !important;
}

The above custom css will change the styling of all the buttons in the revolution slider. You can modify the colors to the color of your choice.

Try that out.

Cheers

Hi Andres,

Am glad it worked out for you :)

This is our cup of tea, so most of this are on our fingertips ;-) but you can get wonderful tutorials online on how to style buttons via css

Always feel free to open a new thread whenever you require support

Cheers