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

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

Need help to Create Button Group with Pointer Shape

问题

I wanted to create this button group.

  1. <div class="btngroup">
  2.   <button type="button" class="btn">Organization</button>
  3.   <button type="button" class="btn">Project</button>
  4.   <button type="button" class="btn">Applications</button>
  5. </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 -->

  1. &lt;div class=&quot;btngroup&quot;&gt;
  2.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Organization&lt;/button&gt;
  3.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Project&lt;/button&gt;
  4.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Applications&lt;/button&gt;
  5. &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/

  1. .btngroup {
  2.   display: flex;
  3.   align-items: center;
  4.   justify-content: center;
  5.   border: 1px solid #eeeeee;
  6.   border-right-color: transparent;
  7.   border-radius: 10px;
  8.   max-width: 80%;
  9.   margin: 0 auto;
  10. }
  12. .btngroup .btn {
  13.   position: relative;
  14.   border: 0;
  15.   background: transparent;
  16.   color: #b2b2b2;
  17.   padding: 20px 40px 20px 50px;
  18.   font-size: 14px;
  19.   font-weight: 300;
  20.   flex: 1;
  21.   cursor: pointer;
  22.   transition: all ease-in-out 0.5s;
  23. }
  25. .btngroup .btn::after,
  26. .btngroup .btn::before {
  27.   position: absolute;
  28.   content: '';
  29. }
  31. .btngroup .btn.active::after,
  32. .btngroup .btn:hover::after {
  33.   background-color: #fbfbfb;
  34.   height: 100%;
  35.   width: 100%;
  36.   top: 0;
  37.   left: -4px;
  38.   z-index: -1;
  39. }
  41. .btngroup .btn::before {
  42.   top: 50%;
  43.   right: -15px;
  44.   height: 44px;
  45.   width: 44px;
  46.   border: 1px solid #eeeeee;
  47.   background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 10%);
  48.   border-bottom-color: transparent;
  49.   border-left-color: transparent;
  50.   transform: translateY(-50%) rotate(45deg);
  51.   border-radius: 10px;
  52. }
  54. .btngroup .btn.active::before,
  55. .btngroup .btn:hover::before {
  56.   background: #fbfbfb;
  57. }
  1. <div class="btngroup">
  2.   <button type="button" class="btn">Organization</button>
  3.   <button type="button" class="btn">Project</button>
  4.   <button type="button" class="btn">Applications</button>
  5. </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 -->

  1. .btngroup {
  2. display: flex;
  3. align-items: center;
  4. justify-content: center;
  5. border: 1px solid #eeeeee;
  6. border-right-color: transparent;
  7. border-radius: 10px;
  8. max-width: 80%;
  9. margin: 0 auto;
  10. }
  11. .btngroup .btn {
  12. position: relative;
  13. border: 0;
  14. background: transparent;
  15. color: #b2b2b2;
  16. padding: 20px 40px 20px 50px;
  17. font-size: 14px;
  18. font-weight: 300;
  19. flex: 1;
  20. cursor: pointer;
  21. transition: all ease-in-out 0.5s;
  22. }
  23. .btngroup .btn::after,
  24. .btngroup .btn::before {
  25. position: absolute;
  26. content: &#39;&#39;;
  27. }
  28. .btngroup .btn.active::after,
  29. .btngroup .btn:hover::after {
  30. background-color: #fbfbfb;
  31. height: 100%;
  32. width: 100%;
  33. top: 0;
  34. left: -4px;
  35. z-index: -1;
  36. }
  37. .btngroup .btn::before {
  38. top: 50%;
  39. right: -15px;
  40. height: 44px;
  41. width: 44px;
  42. border: 1px solid #eeeeee;
  43. background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 10%);
  44. border-bottom-color: transparent;
  45. border-left-color: transparent;
  46. transform: translateY(-50%) rotate(45deg);
  47. border-radius: 10px;
  48. }
  49. .btngroup .btn.active::before,
  50. .btngroup .btn:hover::before {
  51. background: #fbfbfb;
  52. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;btngroup&quot;&gt;
  2.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Organization&lt;/button&gt;
  3.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Project&lt;/button&gt;
  4.   &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Applications&lt;/button&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定