0
263
ViewsCustom shaped buttons for menu
I am trying to achieve this effect which I got on image. I am having trouble in creating custom shapes. Could someone assist me with this please?
body {
margin: 0;
}
.container {
display: flex;
width: 100%;
height: 100vh;
}
.menu {
background: lightgray;
flex: 0.1;
display: flex;
flex-direction: column;
padding-left: 15px;
}
.numbers {
background: #79726c;
border: none;
transform: skewY(10deg);
}
.content {
flex: 1;
background: blue;
}<div class="container">
<div class="menu">
<button class="first">Start
</button>
<button class="numbers">1
</button>
<button class="numbers">2
</button>
</div>
<div class="content">
</div>
</div>
·
Santiago Trujillo
3 answers
Answer question0
To achieve the shape you want on the first button. Use two buttons! Assign the same scripts!
https://www.codegrepper.com/code-examples/css/css+triangle+button
Here's some details on how to make the triangle part!
Good luck!
·
Santiago Trujillo
Report
0
hello,I tried a little and made this one.I think this structure can be useful for you.
Code:
enter code here
<div class="container">
<div class="menu">
<button class="first">Start
</button>
<button class="numbers" id="btn-top-shadow">1
</button>
<button class="numbers">2
</button>
<button class="numbers">3
</button>
<button class="numbers">4
</button>
<button class="numbers">5
</button>
<button class="numbers">6
</button>
<button class="numbers">7
</button>
</div>
<div class="content">
</div>
</div>
body {
margin: 0;
}
.container {
display: flex;
width: 100%;
height: 100vh;
}
.first
{
transform: rotate(270deg) scale(4.5) ;
position: relative;
top:10%;
font-size: 4px;
}
.menu {
background: lightgray;
flex: 0.1;
display: flex;
flex-direction: column;
padding-left: 15px;
}
.numbers {
background: #79726c;
border: none;
transform: skewY(10deg);
width: 38%;
position: relative;
left: 38px;
top: 110px;
color: white;
text-shadow: 0px 7px 3px black;
height: 5%;
border-bottom: 0.4px solid black
}
#btn-top-shadow
{
box-shadow: 0px -7px 7px black;
}
.content {
flex: 1;
background: blue;
}
·
Santiago Trujillo
Report
0
If you were only interested in the visual component, then it turned out quite similar:
body {
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 100vh;
background-color: #312a28;
background-image: url("https://cdn.pixabay.com/photo/2016/11/27/05/02/texture-1862140_960_720.jpg");
}
.container {
position: relative;
display: flex;
height: 626px; width: 70vw;
}
.tabs {
position: relative;
top: 124px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
height: 464px; width: 66px;
user-select: none;
}
.tabs>input {
position: absolute !important;
height: 1px !important;
width: 1px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}
.tab {
position: relative;
left: 6px;
height: 34px; width: 66px;
border: none;
box-sizing: border-box;
font-size: 40px; line-height: 34px;
font-family: sans-serif; font-weight: bold;
text-align: center;
color: #f9f9f7;
background-color: #79726c;
filter: drop-shadow(-2px 8px 4px #0008);
transition: 0.3s ease;
}
.tab:nth-of-type(1) { z-index: 6; }
.tab:nth-of-type(2) { z-index: 5; }
.tab:nth-of-type(3) { z-index: 4; }
.tab:nth-of-type(4) { z-index: 3; }
.tab:nth-of-type(5) { z-index: 2; }
.tab:nth-of-type(6) { z-index: 1; }
.tab:nth-of-type(7) { z-index: 0; }
.tab::before,
.tab::after {
content: "";
position: absolute;
left: 0; z-index: -1;
width: 100%;
border-radius: 6px 4px 4px 6px;
background-color: inherit;
background-image: inherit;
}
.tab::before {
bottom: 16px; height: 126px;
transform: skewy(-28deg);
}
.tab::after {
top: 16px; height: 40px;
transform: skewy(28deg);
}
.tabs > input:not(:checked) + .tab:hover {
background-color: #aba5a0;
cursor: pointer;
}
.tabs > input:checked + .tab {
left: 0; z-index: 7;
background-color: #d8cec1;
background-image: url("https://cdn.pixabay.com/photo/2016/11/08/03/16/seamless-1807376_960_720.jpg");
color: #393534;
}
.tab .vertical {
position: absolute;
left: 10px; top: -85px;
transform: rotate(-90deg);
font-size: 12px;
text-transform: uppercase;
text-shadow: 0 0 2px currentcolor;
}
.content {
position: relative;
left: -3px; z-index: 8;
flex: 1;
border-radius: 6px;
background-color: #d8cec1;
background-image: url("https://cdn.pixabay.com/photo/2016/11/08/03/16/seamless-1807376_960_720.jpg");
box-shadow: 2px 13px 6px -4px #0008;
}<section class="container">
<div class="tabs">
<input type="radio" name="tabs" id="tab0" checked><label for="tab0" class="tab"><span class="vertical">Start</span></label>
<input type="radio" name="tabs" id="tab1"><label for="tab1" class="tab">1</label>
<input type="radio" name="tabs" id="tab2"><label for="tab2" class="tab">2</label>
<input type="radio" name="tabs" id="tab3"><label for="tab3" class="tab">3</label>
<input type="radio" name="tabs" id="tab4"><label for="tab4" class="tab">4</label>
<input type="radio" name="tabs" id="tab5"><label for="tab5" class="tab">5</label>
<input type="radio" name="tabs" id="tab6"><label for="tab6" class="tab">6</label>
</div>
<div class="content"></div>
</section>
·
Santiago Trujillo
Report
Answer question