Border behind Button slight below position CSS

user_4748863 0
Viewed 522

I m trying to implement below button CSS, I tried to used box-shadow as well psuedo code i.e before after still not getting the output I wanted.

the button that I wanted:

button which I wanted

my code:

.et_pb_button {
  background-color: #f16922!important;
  width: 65%;
  outline: 3px solid #f16922;
  outline-offset: 10px;
  text-transform: uppercase;
  font-size: 14px!important;
}
<a href="" class="et_pb_button">Button</a>

button css html
4 Answers

Please see below snippet:

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
  z-index: -1;
}
<button>View Project</button>

user_72890670 

.btngroup button{
  background-color: rgb(29, 174, 236);
  border: 0;
  padding: 10px 15px;
  font-size: 15px;
  color: white;
  width: 150px;
  height: 50px;
  text-transform: uppercase
}

.btngroup .drop{
  width: 165px;
  height: 50px;
  border: 1.5px solid red;
  margin-top: -42.5px;
}
<center>
<div class="btngroup">
  <button>view project</button>
  <div class="drop"></div>
</div>
</center>

user_79059360

Here is an idea with one element and multiple background and border-image:

.button {
  display:inline-block;
  padding:10px 60px 20px;
  margin:10px;  
  color:#fff;
  
  border:2px solid transparent;
  border-image:linear-gradient(to bottom,transparent 10px,red 0) 2;

  background:
    linear-gradient(blue,blue) top center/calc(100% - 20px) calc(100% - 10px),
    linear-gradient(red,red)   0 8px     /100% 2px;
  background-repeat:no-repeat;

}
<span class="button">Button</span>

And with CSS variable to easily control the whole shape:

.button {
  --t:10px; /* Distance of the border from the top*/
  --p:10px; /* Distance between the border and background*/
  --b:2;  /* Thickness of the border (unitless to be used with slice)*/
  --c:red;  /* border color*/

  display:inline-block;
  padding:var(--p) 60px calc(2*var(--p));
  margin:10px;  
  color:#fff;
  
  border:calc(1px*var(--b)) solid transparent;
  border-image:linear-gradient(to bottom,transparent var(--t),var(--c) 0) var(--b);

  background:
    linear-gradient(blue,blue) top center/calc(100% - 2*var(--p)) calc(100% - var(--p)),
    linear-gradient(var(--c),var(--c))   0 calc(var(--t) - 1px*var(--b))/100% calc(1px*var(--b));
  background-repeat:no-repeat;

}
<span class="button">Button</span>

<span class="button" style="--c:green;--t:15px;--p:8px;--b:3;">Button</span>

<span class="button" style="--c:#000;--t:25px;--p:15px;--b:1;">Button</span>

user_86203330

Here's an alternative based on Hanif's suggestion, which uses both pseudo-elements instead of one with a negative z-index. For some backgrounds (e.g. an image or gradient), it might be necessary to adjust the background-position for the ::after

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: inherit;
  display: block;
}
<button>View Project</button>

user_28411490
Related