Engkus Kusnadi Engkus Kusnadi - 1 year ago 134
CSS Question

CSS: border-color:inherit

I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working.

Here's look like my button when i hover it

enter image description here

What i want is the border-color is red, and if the parent background-color is green the border-color is green

And here's my code

.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
border:3px solid #0b527a;
border-left: 0;
display: block;
overflow: hidden;
white-space: nowrap;

.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;

Here's my fiddle https://jsfiddle.net/evpsthx3/

Answer Source

Problem is your parent has not border color set. So just set the border color to the parent. Something like this might work: https://jsfiddle.net/evpsthx3/9/

<div class="parent red">
<a class="cta">BUTTON</a>

<div class="parent green">
<a class="cta">BUTTON</a>

.parent.red {
  background-color: red;
  border-color: red;

.parent.green {
  background-color: green;
  border-color: green;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download