如何使用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> 

Answer 3

Here's how I'd do it. Please note I changed the markup, making them siblings of a common wrapper. I used background-color: inerhit . Proof of concept:

 .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; color: white; position: absolute; width: 100%; } .button-holder>div { color: white; position: relative; width: calc(100% + 2px); left: 5px; bottom: 8px; padding: 5px 15px; outline: none; border-radius: 3px; background-color: inherit; border: 2px solid #fff; font-size: 12px; box-sizing: border-box; } body { background-color: teal; } .button-holder { background-color: inherit; display: inline-block; position: relative; } 

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

Answer 4

For modern browsers ( except IE/Edge ) you can use the clip-path css property and create a polygon to clip the element on the back to only show the parts you want.

This will make it truly transparent, in the sense that it can appear even over images.

 body{background:url('https://placeimg.com/640/480/animals') no-repeat;} .btn-base { margin: 0; height: 30px; outline: none; border-radius: 3px; border: 2px solid currentColor; font-size: 12px; transition: 0.5s; padding: 5px 15px; font-size: 12px; position:relative; background:transparent; color:#fff; cursor:pointer; } .btn-base:before { content:''; position: absolute; width: 100%; height:100%; left: -7px; bottom: -10px; border-radius: 3px; /* hardcoded code, must be transparent */ border: 2px solid currentColor; cursor:pointer; -webkit-clip-path: polygon(0 0, 5% 0, 5% 88%, 100% 88%, 100% 100%, 0 100%); clip-path: polygon(0 0, 5% 0, 5% 70%, 100% 70%, 100% 100%, 0 100%); } 

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

Answer 5

You can imitate borders using box-shadow to create a multi-border look.

Example:

 button { border: 0; background: #666; box-shadow: -8px 8px 0 -4px #FFF, -8px 8px 0 0px #666; } 

 <button>Sample</button>