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>
5
Answers
You could do that with only, box shadow property
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:You can imitate borders using box-shadow to create a multi-border look.
Example:
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.
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: