How to implement complicated button style using CSS

Question

I faced a little problem. I'm implementing the web-site design and need to implement a bit complicated button style (attached here). I have no idea how to make that using only CSS.

It's gonna be a few button styles and one of its must be with transparent background and must get background color from element where this button is placed. I implemented button with custom background that can be set using CSS. But it's not flexibly to use. If I want to use it on the different backgrounds you should add new style like "btn-customColor" etc. Now I have styles for transparent background and it looks:

The point is that I can't cut or hide the part of bottom block under top block with transparent background. I can set color and it will be like first image. But it restricts usages of buttons. I could use btn-transparent instead btn-blue, btn-green, btn-white, etc.

I had another idea to draw buttons in photoshop, but it's not really good approach and there are a lot of "no" here. Maybe is it possible to implement using canvases or smth. like that? If it's, would be great if you shared a few links for articles and so on.

There are staff that is available to use: HTML, CSS, JS (jQuery).

I hope I explained what the problem is. Any ideas and help is appreciated.

Thank you for your time.

.btn-base {
  padding: 0;
  margin: 0;
  height: 30px;
  outline: none;
  border-radius: 3px;
  background: transparent;
  border: 2px solid #fff;
  font-size: 12px;
  transition: 0.5s;
}

.btn-base>div {
  position: relative;
  width: 101%;
  left: 3px;
  bottom: 8px;
  padding: 5px 15px;
  outline: none;
  border-radius: 3px;
  background: #e4645d;
  /* hardcoded code, must be transparent */
  border: 2px solid #fff;
  font-size: 12px;
}

<button type="submit" class="btn-base btn-transparent">
  <div>Button example</div>
</button>

Answer 1

Consider using pseudo-elements as an alternative solution.

This method is demonstrated against x3 varying background colours in the code snippet embedded below.

Code Snippet Demonstration:

.row {
  padding: 20px;
}

.row:nth-child(1) {
  background: #e4645d;
}

.row:nth-child(2) {
  background: #5dace4;
}

.row:nth-child(3) {
  background: #5fe45d;
}

.btn-base {
  padding: 0;
  margin: 0;
  height: 30px;
  outline: none;
  border-radius: 3px;
  background: transparent;
  border: 2px solid #fff;
  font-size: 12px;
  transition: 0.5s;
  /* added */
  position: relative; /* required for absolutely positioned pseudo-elements */
  padding: 0px 10px;
}

/* Additional */

.btn-base:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 30px;
    border: 2px solid #fff;
    border-right: 0;
    right: 100%;
    bottom: -5px;
    top: 5px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-sizing: border-box;
}

.btn-base:after {
    content: "";
    position: absolute;
    border: 2px solid #fff;
    height: 9px;
    border-top: 0;
    border-left: 0;
    right: 5px;
    left: 0;
    bottom: -9px;
    border-bottom-right-radius: 3px;
    box-sizing: border-box;
}

<div class="row">
  <button type="submit" class="btn-base btn-transparent">Button example</button>
</div>
<div class="row">
  <button type="submit" class="btn-base btn-transparent">Button example</button>
</div>
<div class="row">
  <button type="submit" class="btn-base btn-transparent">Button example</button>
</div>

Answer 2

You could do that with only, box shadow property

body{
  background:#e4645d;
  text-align:center;
}
.btn-base {
   padding: 10px;
   margin: 0;
   outline: none;
   border-radius: 3px;
   background: transparent;
   border: 2px solid #fff;
   font-size: 12px;
   transition: 0.5s
   color:white;
        box-shadow: -10px 10px 0 -2px #e4645d, -10px 10px 0 0px white;
}

<button type="submit" class="btn-base btn-transparent">
   Button example
</button>