英文:
Need help to Create Button Group with Pointer Shape
问题
I wanted to create this button group.
<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>
The hover effect is like the grey color in the 'Application'.
英文:
I wanted to create this button group.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>
<!-- end snippet -->
The hover effect is like the grey color in the 'Application'
答案1
得分: 1
请检查以下代码链接吧?希望对您有用。我们使用了 flex-box 属性创建了一个结构。
请参考此链接:https://jsfiddle.net/yudizsolutions/oa8pyjuq/
.btngroup {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eeeeee;
border-right-color: transparent;
border-radius: 10px;
max-width: 80%;
margin: 0 auto;
}
.btngroup .btn {
position: relative;
border: 0;
background: transparent;
color: #b2b2b2;
padding: 20px 40px 20px 50px;
font-size: 14px;
font-weight: 300;
flex: 1;
cursor: pointer;
transition: all ease-in-out 0.5s;
}
.btngroup .btn::after,
.btngroup .btn::before {
position: absolute;
content: '';
}
.btngroup .btn.active::after,
.btngroup .btn:hover::after {
background-color: #fbfbfb;
height: 100%;
width: 100%;
top: 0;
left: -4px;
z-index: -1;
}
.btngroup .btn::before {
top: 50%;
right: -15px;
height: 44px;
width: 44px;
border: 1px solid #eeeeee;
background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 10%);
border-bottom-color: transparent;
border-left-color: transparent;
transform: translateY(-50%) rotate(45deg);
border-radius: 10px;
}
.btngroup .btn.active::before,
.btngroup .btn:hover::before {
background: #fbfbfb;
}
<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>
英文:
Can you please check the below code link? Hope it will work for you. We have made a structure using the flex-box property.
Please refer to this link: https://jsfiddle.net/yudizsolutions/oa8pyjuq/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.btngroup {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eeeeee;
border-right-color: transparent;
border-radius: 10px;
max-width: 80%;
margin: 0 auto;
}
.btngroup .btn {
position: relative;
border: 0;
background: transparent;
color: #b2b2b2;
padding: 20px 40px 20px 50px;
font-size: 14px;
font-weight: 300;
flex: 1;
cursor: pointer;
transition: all ease-in-out 0.5s;
}
.btngroup .btn::after,
.btngroup .btn::before {
position: absolute;
content: '';
}
.btngroup .btn.active::after,
.btngroup .btn:hover::after {
background-color: #fbfbfb;
height: 100%;
width: 100%;
top: 0;
left: -4px;
z-index: -1;
}
.btngroup .btn::before {
top: 50%;
right: -15px;
height: 44px;
width: 44px;
border: 1px solid #eeeeee;
background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 10%);
border-bottom-color: transparent;
border-left-color: transparent;
transform: translateY(-50%) rotate(45deg);
border-radius: 10px;
}
.btngroup .btn.active::before,
.btngroup .btn:hover::before {
background: #fbfbfb;
}
<!-- language: lang-html -->
<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论