创建带指针形状的按钮组。

huangapple go评论62阅读模式
英文:

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 -->

&lt;div class=&quot;btngroup&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Organization&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Project&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Applications&lt;/button&gt;
&lt;/div&gt;

<!-- 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: &#39;&#39;;
}
.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 -->

&lt;div class=&quot;btngroup&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Organization&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Project&lt;/button&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Applications&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月11日 12:17:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/75982368.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定