Thank you very much for the X theme it is a pleasure to work with.

I have a question about the CSS, i’d like to change the CSS of a button in a plugin, all of the buttons look the same except for one button on my page. How can I take care of this issue. I’d asked the guy of the plugin but they are not much of a help. They said this:

The submit button is different because it’s type=”button” while the other one is type=”submit”. So in your CSS you just need to make sure type=”submit” includes also type=”button”.

this is the link: http://www.atplexamen.nl/mijn-examens/010-aviation-law/01-international-law-conventions-agreements-organizations/

Thenk you in advance!!!!!

Thanks for writing in
Can you post your CSS Code here?
Also, the link you gave is not available.

Please advise

I’m sorry for the broken link, this one actually works: http://www.atplexamen.nl/mijn-examens/010-aviation-law-examen/01-international-law-conventions-agreements-organizations/

If you control over the HTML of your plugin, you can add the class “x-btn” to your button. If not, please add the code below in the Customizer > Custom > CSS.

[type="button"]
{
	display:inline-block;
	position:relative;
	border:1px solid #ac1100;
	padding:0.563em 1.125em 0.813em;
	cursor:pointer;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.3;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	background-color:#ff2a13;
	-webkit-transition:all 0.15s linear;
	transition:all 0.15s linear
}
[type="button"]:hover
{
	text-decoration:none;
	color:#fff;
	border-color:#600900;
	background-color:#df1600
}
[type="button"]:focus
{
	outline:thin dotted #333;
	outline:5px auto #16a085;
	outline-offset:-1px
}

Hope that helps. 🙂

The total CSS looks like this now:

#watupro_quiz {
font-size:16px;
}
.question-content {
font-weight:600;
}

.x-btn-navbar.collapsed {
margin-right: 20px;
}

[type=”button”]
{
display:inline-block;
position:relative;
border:1px solid #ac1100;
padding:0.563em 1.125em 0.813em;
cursor:pointer;
font-size:16px;
font-size:1.6rem;
line-height:1.3;
text-align:center;
vertical-align:middle;
color:#fff;
background-color:#ff2a13;
-webkit-transition:all 0.15s linear;
transition:all 0.15s linear
}
[type=”button”]:hover
{
text-decoration:none;
color:#fff;
border-color:#600900;
background-color:#df1600
}
[type=”button”]:focus
{
outline:thin dotted #333;
outline:5px auto #16a085;
outline-offset:-1px
}

CAn you please tell me how to solve this problem?

Thanks in advance!!

Please try the CSS

input[type="button"] {
	color: #1e1e1e;
	border-color: #cccccc;
	border-width: 3px;
	text-transform: uppercase;
	background-color: transparent;
	border-radius: 0.25em;
}

input[type="button"]:hover {
	border-color: orange;
}

Hope that helps. 🙂

You guys are the best!!