Hover on post comment button

  • Resolved aynos

    (@aynos)


    3 years ago

    Hello there, I am relatively new to WordPress and I’m struggling a bit with CSS…
    I managed to set the mouse over thing for most of my items on the website but it doesn’t work with the “POST COMMENT” input button. I basically have POST COMMENT with a white background when hovering.

    Let say I want the borders to be blue on hovering. What I’ve tried so far: 

    /* POST COMMENT BUTTON */
.highlander-dark .comments-area #respond p.form-submit input#comment-submit:hover{
	border-color: blue;
}

    But it doesn’t work…

    I have also tried things like :

    input[type=submit]:hover {border-color: blue;}

    it doesn’t work either.

    Thank you in advance for your help !

Viewing 4 replies - 1 through 4 (of 4 total)
  • supernovia

    (@supernovia)

    Hi, would you mind sharing a link to the site? We’ll see if we can spot the issue.

    Thread Starter aynos

    (@aynos)

    Hey @supernovia ! ??

    Thank you for your reply !

    In fact the website is still under construction, it is not launches yet. I don’t know if there is a way to give you a “guest link” so you can access it

    fresatomica

    (@fresatomica)

    It won’t be easy to advise without seeing your site’s actual code. If there are other things you’d like to work on your site, you can focus on those and publish your site when everything else is ready. Then drop the URL here, and we’ll take a look.

    Thread Starter aynos

    (@aynos)

    Finally found the solution !

    it was a bit tricky as I had to use “-webkit-” in order to change the font colors in the input button, I also had to use “!important” to override previous settings, without that, nothing is going to change !

    here is what worked for me:

    /* POST COMMENT BUTTON */
.highlander-dark .comments-area #respond p.form-submit input#comment-submit,input[type=submit] {
      
	border-color: #C1C1C1;
	border-width: 1.5px;
	font-weight: 600!important;
	font-size:15px!important;
	font-family:Avenir!important;
        -webkit-text-fill-color:#767676;

}

/* POST COMMENT BUTTON HOVER*/
.highlander-dark .comments-area #respond p.form-submit input#comment-submit:hover, input[type=submit]:hover {
	-webkit-text-fill-color:white!important;
	background-color:#C1C1C1!important;
        border-width:1.5px!important;
	border-color:#C1C1C1!important;
	font-weight: 500!important;
	font-size:15px!important;
	font-family:Avenir!important;
	
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hover on post comment button’ is closed to new replies.