I’m trying to create component similar to image.
But I can’t find the way how can I can style the button and this block in css.
What I have now.
.button {
position: relative;
display: block;
background: transparent;
width: 390px;
height: 72px;
line-height: 80px;
font-size: 20px;
text-decoration: none;
color: #1C1C21;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.button:before,
.button:after {
position: absolute;
content: '';
width: 390px;
left: 0;
height: 34px;
z-index: 0;
}
.button:before {
transform: perspective(15px) rotateX(3deg);
}
.button:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
/* Button Border Style */
.button.border:before,
.button.border:after {
border: 1px solid #D0D0D8;
}
.button.border:before {
border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button-wrapper {
display: flex;
flex-wrap: wrap;
}
<div class="button-wrapper">
<a href="#" class="button ribbon-outset border">Click me! </a>
<a href="#" class="button ribbon-outset border">Click me! </a>
<a href="#" class="button ribbon-outset border">Click me! </a>
<a href="#" class="button ribbon-outset border">Click me! </a>
</div>
But it’s not similar to what I want.
How can I do this element button and the how I can display them like on image and for mobile devices to?
3
Answers
It seems like it has a specific width and height on all buttons, so you can just make it as a background image.
I agree with @FrancisAlbores, background images are the way to go for this. If your buttons are a fixed size that’s easy, but if you need them to be flexible width you can use a stack of three images, one each for the left and right sides, on top of a repeating centre section.
Just an idea would need to refining and playing around with to get right but you could also try using sudo elements to accomplish this.