css - Can't change element's border colour on hover -

i trying change triangle's colour when user hovers on button.

i have tried applying style hovered child element of button , did not work.

how can triangle change colour on button hover normal button's background colour.

my code:

#contact-form .submit {      background: none repeat scroll 0 0 #3f3f3f;      display: block;      margin-top: 30px;      padding: 16px 40px;      width: 115px;  }    .contact-submit {  	color: #222;      font-weight: normal;  }    #contact-form > .contact-submit > .hvr-bubble-float-top {    display: inline-block;    vertical-align: middle;    -webkit-transform: translatez(0);    transform: translatez(0);    box-shadow: 0 0 1px rgba(0, 0, 0, 0);    -webkit-backface-visibility: hidden;    backface-visibility: hidden;    -moz-osx-font-smoothing: grayscale;    position: relative;    -webkit-transition-duration: 0.2s;    transition-duration: 0.2s;    -webkit-transition-property: transform;    transition-property: transform;    top: 0;  }    #contact-form > .contact-submit > .hvr-bubble-float-top:before {    position: absolute;    z-index: -1;    content: '';    left: calc(50% - 10px);    top: 0;    border-style: solid;    border-width: 0 10px 10px 10px;    border-color: transparent transparent #666 transparent;    -webkit-transition-duration: 0.2s;    transition-duration: 0.2s;    -webkit-transition-property: transform;    transition-property: transform;  }    #contact-form > .contact-submit > .hvr-bubble-float-top:hover, #contact-form > .contact-submit > .hvr-bubble-float-top:focus, #contact-form > .contact-submit > .hvr-bubble-float-top:active {    -webkit-transform: translatey(10px);    transform: translatey(10px);    -webkit-transition-duration: 0.2s;    transition-duration: 0.2s;    display: inline-block;    background-color: #666;    border-color: transparent transparent #666 transparent !important;  }    #contact-form > .contact-submit > .hvr-bubble-float-top:hover:before, #contact-form > .contact-submit > .hvr-bubble-float-top:focus:before, #contact-form > .contact-submit > .hvr-bubble-float-top:active:before {    -webkit-transform: translatey(-10px);    transform: translatey(-10px);    -webkit-transition-duration: 0.2s;    transition-duration: 0.2s;    position: absolute;    z-index: 5000;  }

<p class="contact-submit">                  	<a id="contact-submit" class="submit hvr-bubble-float-top" href="#">send message</a>                  </p>

update border-bottom-color .hvr-bubble-float-top:hover:before. using styling base:

#contact-form > .contact-submit > .hvr-bubble-float-top:hover:before, #contact-form > .contact-submit > .hvr-bubble-float-top:focus:before, #contact-form > .contact-submit > .hvr-bubble-float-top:active:before {     …     border-bottom-color: red; } 

sample.