search

zhangxinxu / quiz

小测答题收集区
536 stars 43 forks source link

CSS基础测试13 #47

Open zhangxinxu opened 5 years ago

zhangxinxu commented 5 years ago

本期小测关于一个组合小按钮的书写：

每个要点1积分。

请附上对应的CSS代码，注意缩进和代码高亮（没有减1分），可以使用下面语法进行高亮：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

由于本周六部门团建，因此本期小测直播答疑暂定为下下周周六10月26日上午10:00，和下周小测一起答疑，大约60分钟，直播地址：https://live.bilibili.com/21193211

首位答题者会获得100%倍被翻牌技能，每位答题者都可获得2积分底分。

感谢您的参与！

XboxYan commented 5 years ago

demo

<button-group class="ui-group">
    <details>
        <summary class="ui-btn"><icon name="eye"></icon> Unwatch </summary>
    </details>
    <a class="ui-link" href="/">63</a>
</button-group>
<button-group class="ui-group">
    <button class="ui-btn"><icon name="star"></icon> Unstar</button>
    <a class="ui-link" href="/">63</a>
</button-group>
<button-group class="ui-group">
    <button class="ui-btn"><icon name="fork"></icon> Fork</button>
    <a class="ui-link" href="/">63</a>
</button-group>
/* 按钮组小尺寸不换行没有支持 */
summary::-webkit-details-marker{
    display: none;
}
details{
    display: inline-block;
}
.ui-group{
    font-size: 0;
    color: #24292e;
    line-height: 20px;
}
.ui-group+.ui-group{
    margin-left: 10px;
}
.ui-btn{
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    line-height: inherit;
    color: inherit;
    background-color: #eff3f6;
    background-image: linear-gradient(to bottom,#fafbfc,#eff3f6);
    border: 1px solid #c5c9cc;
    border-radius: 3px 0 0 3px;
    vertical-align: middle;
    cursor: pointer;
}
summary.ui-btn::after{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: -2px;
    border: 4px solid transparent;
    border-top-color: currentcolor;
}
.ui-link{
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    color: inherit;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #c5c9cc;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    text-decoration: none;
}
icon{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -2px;
}

icon[name=eye]{
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z'/%3E%3C/svg%3E") no-repeat center/100%;
}

icon[name=star]{
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z'/%3E%3C/svg%3E") no-repeat center/100%;
}

icon[name=fork]{
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/100%;
}

另外，这个svg工具发现了一点小bug

image

image

出现了很多NaN

liyongleihf2006 commented 5 years ago

jsbin

<form class="js-social-form">
    <details class="select-menu">
        <summary class="select-menu-button btn" role="button">
            <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
                </path>
            </svg>
            <span class="btn-text">
                Unwatch
            </span>
        </summary>
    </details>
    <a class="social-count">
        63
    </a>
</form>
<form class="js-social-form">
    <button class="btn" role="button">
        <svg viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
        </svg>
        <span class="btn-text">
            Star
        </span>
    </button>
    <a class="social-count">
        445
    </a>
</form>
<form class="js-social-form">
    <button class="btn" role="button">
        <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10"
            height="16" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
            </path>
        </svg>
        <span class="btn-text">
            Fork
        </span>
    </button>
    <a class="social-count">
        25
    </a>
</form>
.js-social-form {
    display: inline-flex;
}

.btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(27, 31, 35, .2);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 3px 10px;
    color: #24292e;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
}

.select-menu ::-webkit-details-marker {
    display: none;
}

.select-menu ::-moz-list-bullet {
    font-size: 0;
}

.select-menu-button:after {
    width: 0;
    height: 0;
    margin-top: 5px;
    content: "";
    border: 4px solid transparent;
    border-top-color: currentcolor;
}

.btn-text {
    padding: 0 4px;
}

.social-count {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #24292e;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid rgba(27, 31, 35, .2);
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
WGHwebitem commented 5 years ago

Demo

.hgul {
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 400px;
    font-family: "BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif";
}

.hgul li {
    float: left;
    margin: 20px 10px 0 0;
    display: list-item;
}

.hgul li img {
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.hgul li a {
    float: left;
    text-decoration: none;
    vertical-align: middle;
    font-size: 12px;
    padding: 4px 12px;
    line-height: 20px;
    color: #262a2e;
}

.hgul-font {
    cursor: pointer;
    background: #eff3f6;
    border: 1px solid rgba(27, 31, 35, .2);
    border-top-left-radius: 3px;
    border-top-left-radius: 3px;
}

.hgul-font:hover {
    background: linear-gradient(180deg, #fafbfc, #eff3f6);
}

.hgul-count {
    border: 1px solid rgba(27, 31, 35, .2);
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.hgul-count:hover {
    color: blue;
}
livetune commented 5 years ago

code 压缩的时候发现fork的 svg 里的代码有些被转义成 Nan了 

<ul class="button-group">
  <li>
    <details class="watch-button">
      <summary class="button" role="button">Unwatch</summary>
    </details>
    <a href="javascript:void">63</a>
  </li>
  <li>
    <button class="button star-button">
      Unstar
    </button>
    <a href="javascript:void">445</a>
  </li>
  <li>
    <button class="button fork-button">
      Fork
    </button>
    <a href="javascript:void">25</a>
  </li>
</ul>
ul {
  display: flex;
  color: #24292e;
  font-weight: 600;
  white-space: nowrap;
  font-size: 12px;

}

li {
  display: flex;
  align-items: center;
  margin-right: 10px;
  border: 1px solid rgba(27, 31, 35, .2);
  border-radius: .25em;
  user-select: none;
  cursor: pointer;
}

a {
  display: flex;
  align-items: center;
  color: #24292e;
  text-decoration: none;
  padding: 0 10px;
  height: 100%;
}

a:hover {
  color: #0366d6
}

.watch-button ::-webkit-details-marker {
  display: none
}

.button:focus {
  outline: none;
}

.button,
summary.button {
  height: 100%;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  border-right: 1px solid rgba(27, 31, 35, .2);
  padding: 3px 10px;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
}

.button:hover {
  background: #e6ebf1 linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
  background-position: -.5em;
  border-color: rgba(27, 31, 35, .35);
}

.button::before {
  content: '';
  display: inline-block;
  margin-right: 3px;
  width: 16px;
  height: 13px;
  vertical-align: -2px;
  background-size: 100%;
}

.watch-button summary::before {
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' class='octicon octicon-eye v-align-text-bottom' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z'/%3E%3C/svg%3E") no-repeat center;
}

.watch-button summary::after {
  content: '';
  display: inline-block;
  margin-left: 3px;
  vertical-align: -2px;
  border: 4px solid transparent;
  border-top: 4px solid;
}

.star-button::before {
  width: 12px;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' class='octicon octicon-star v-align-text-bottom' viewBox='0 0 14 16' width='14' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z'/%3E%3C/svg%3E") no-repeat center;
}

.fork-button::before {
  vertical-align: -4px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' class='octicon octicon-repo-forked v-align-text-bottom' viewBox='0 0 10 16' width='10' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z'/%3E%3C/svg%3E") no-repeat center;
}
NeilChen4698 commented 5 years ago

Demo https://codepen.io/crazyboy/pen/KKKMRmv

<ul class="widget-wrapper">
    <li class="widget-group" role="group">
        <button class="btn" aria-label="unwatch"><svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg><span class="menu-span">Unwatch</span></button>
        <div class="widget-label" aria-label="63"><span>63</span></div>
    </li>
    <li class="widget-group" role="group">
        <button class="btn" aria-label="star"><svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg><span>Star</span></button>
        <div class="widget-label" aria-label="445">445</div>
    </li>
    <li class="widget-group" role="group">
        <button class="btn" aria-label="fork"><svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg><span>Fork</span></button>
        <div class="widget-label" aria-label="25">25</div>
    </li>
</ul>
/* zxx: 视觉还原不错，不过按钮并不是整体，可能一半区域会掉下来 */
.widget-wrapper {
    padding-left: 0;
    font-size: 14px;
    height: 2.5em;
    min-width: 35em;
}
.widget-wrapper::after {
    content: '';
    display: inline-block;
    clear: both;
}
.widget-group {
    list-style: none;
    height: 100%;
    float: left;
    margin-right: 10px;
}
.widget-group>* {
    float: left;
    height: 100%;
    color: #333;
    font-weight: bolder;
    padding: 0.5em 1em;
    box-sizing: border-box;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px 1px 1px 0;
}
.widget-group>:first-child {
    border-left-width: 1px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.widget-group>:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn {
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    cursor: pointer;
}
.btn:hover {
    background-color: #e6ebf1;
    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
    border-color: #999;
}
.btn:active {
    background-color: #e9ecef;
    background-image: none;
    border-color: #999;
}
.btn svg {
    margin-right: 0.2em;
    vertical-align: bottom;
}
.menu-span::after {
    content: '';
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: #333;
    margin-left: 4px;
    vertical-align: -2px;
}
.widget-label {
    vertical-align: middle;
    line-height: 1.4em;
}
juzhiqiang commented 5 years ago

demo 示例

<!-- 这里偷了点懒图标使用了 github的svg -->
  <ul class="list">
    <li>
      <details class="datalist">
        <summary>
          <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
          Unwatch
        </summary>
      </details>
      <a href="#">63</a>
    </li>
    <li>
      <details>
        <summary>
          <svg viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
          Star
        </summary>
      </details>
      <a href="#">455</a>
    </li>
    <li>
      <details>
        <summary>
          <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
          Fork
        </summary>
      </details>
      <a href="#">25</a>
    </li>
  </ul>

css部分

/* zxx: 布局结构还行，视觉还原有待加强 */
.list{
  list-style: none;
}

summary{
    outline: none;
}

summary::-webkit-details-marker{
  display: none;
}

.list li{
  float: left;
  display: flex;
  margin-right:10px;
  border-radius: 3px;
  border: 1px solid #ccd0d3;
  background: #fff;
  font-size: 14px;
}

.list a{
  color: #333;
  text-decoration: none;
  border-left: 1px solid #ccd0d3;
}

.list details,.list a{
  padding: 4px 10px;
}

.list details{
  cursor: pointer;
  background: linear-gradient(#fff,#f3f6f8,#f1f4f7,#eff3f5);
}  

.datalist summary:after{
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-top-color: #333;
}

.list svg,.datalist summary:after{
  vertical-align: -2px;
}
Seasonley commented 5 years ago

demo

<ul class="pagehead-actions">
  <li class="pagehead-actions-item">
    <details class="select-menu">
      <summary class="pagehead-btn" role="button" icon="eye">Unwatch</summary>
      ...
    </details>
    <a class="pagehead-link"
       href="#"
       aria-label="63 users are watching this repository">63</a>
  </li>
  <li class="pagehead-actions-item">
    <button class="pagehead-btn" icon="star">Star</button>
    <a class="pagehead-link"
       href="#"
       aria-label="445 users starred this repository">445</a>
  </li>
  <li class="pagehead-actions-item">
    <button class="pagehead-btn" icon="fork">Fork</button>
    <a class="pagehead-link"
       href="#"
       aria-label="25 users forked this repository">25</a>
  </li>
</ul>
/* 语义化不错，按钮组小尺寸不换行没有支持 */
.pagehead-actions {
  font-size: 12px;
  font-weight: bold;
  padding: 0;
  margin: 0;
}
.pagehead-actions-item {
  list-style: none;
  float: left;
  margin-right: 10px;
}
summary::-webkit-details-marker {
  display: none;
}
details {
  display: inline-block;
}
.pagehead-btn {
  cursor: pointer;
  background: linear-gradient(
    -180deg,
    rgb(250, 251, 252),
    rgb(239, 243, 246) 90%
  );
  color: #24292e;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid rgba(27, 31, 35, 0.2);
  padding: 3px 10px;
  border-radius: 3px 0 0 3px;
  height: 20px;
  box-sizing: content-box;
}
.pagehead-btn:hover {
  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
  background-position: -0.5em;
  border-color: rgba(27, 31, 35, 0.35);
}
.pagehead-btn:active {
  border-color: rgba(27, 31, 35, 0.35);
  box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
  outline: 0;
}
.pagehead-btn:focus:not(:focus-visible) {
  outline: 0;
}
.pagehead-btn[icon]::before {
  display: inline-block;
  height: 16px;
  vertical-align: text-bottom;
  margin-right: 3px;
}
.pagehead-link {
  float: right;
  text-decoration:none;
  padding: 3px 10px;
  line-height: 20px;
  color: #24292e;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-radius: 0 3px 3px 0;
}
.pagehead-link:hover {
  color: #0366d6;
}
.pagehead-btn[icon="star"]::before {
  content: url("data:image/svg+xml,%3Csvg  viewBox='0 0 14 16' width='14' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z'/%3E%3C/svg%3E");
}
.pagehead-btn[icon="fork"]::before {
  content: url("data:image/svg+xml,%3Csvg  viewBox='0 0 10 16' width='10' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z' /%3E%3C/svg%3E");
}
.pagehead-btn[icon="eye"]::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z'/%3E%3C/svg%3E");
}
.select-menu .pagehead-btn::after {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: -2px;
  content: "";
  border: 4px solid transparent;
  border-top-color: currentcolor;
  margin-left: 3px;
}
sghweb commented 5 years ago

demo

<ul class="button__group clearfix">
  <li class="button__group--list clearfix">
    <details class="fl">
      <summary>
        <button class="button__group--con down">
          <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="20" height="20" aria-hidden="true">
            <path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path>
          </svg>
          Watch
        </button>
      </summary>
    </details>
    <a href="#" class="fl button__group--link">63</a>
  </li>
  <li class="button__group--list clearfix">
    <button class="fl button__group--con">
      <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="19" height="20" aria-hidden="true">
        <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
      </svg>
      Star
    </button>
    <a href="#" class="fl button__group--link">445</a>
  </li>
  <li class="button__group--list clearfix">
    <button class="fl button__group--con">
      <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="14" height="20" aria-hidden="true">
        <path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
      </svg>
      Fork
    </button>
    <a href="#" class="fl button__group--link">25</a>
  </li>
</ul>
/* 按钮组小尺寸不换行没有支持 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
button {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid #d2d3d5;
  border-radius: 6px;
  -webkit-appearance: none;
  outline: none;
}
details summary::-webkit-details-marker {
  display: none;
}
.button__group--list {
  float: left;
  margin-right: 15px;
}
.button__group--list:last-child {
  margin-right: 0;
}
.clearfix::after,
.clearfix::before {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.fl {
  float: left;
}
.button__group--con {
  padding: 8px 15px;
  font-size: 16px;
  line-height: 24px;
  color: #24292e;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #f6f9fa;
  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
}
.button__group--con svg {
  vertical-align: text-bottom;
}
.button__group--con.down::after {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: -3px;
  content: "";
  border: 6px solid transparent;
  border-top-color: currentcolor;
}
.button__group--link {
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #24292e;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #d2d3d5;
  border-left: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
guqianfeng commented 5 years ago

demo

    <ul>
        <li>
            <button type="unwatch">Unwatch</button>
            <a href="">63</a>
        </li>
        <li>
            <button type="star">Star</button>
            <a href="">445</a>
        </li>
        <li>
            <button type="fork">Fork</button>
            <a href="">25</a>
        </li>
    </ul>
/* 语义化还行，至于视觉还原，恩……至于代码质量，恩…… */
        * {
            padding: 0;
            margin: 0;
        }

        ul, li {
            list-style: none;
        }

        ul {
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }

        ul > li {
            display: flex;
        }

        ul > li + li {
            margin-left: 20px;
        }

        ul > li > a{
            padding: 5px 10px;
            border: 1px solid #ccc;
            border-left-width: 0;
            font-size: 12px;
            color: #222;
            text-decoration: none;
        }

        ul > li > button {
            position: relative;
            background-image: linear-gradient(to bottom,#fafbfc,#eff3f6);
            outline: none;
            cursor: pointer;
            border: 1px solid #ccc;
            padding: 5px 20px 5px 30px;
        }

        ul > li > button:hover{
            background-color: #ccc;
            border: 1px solid black;
        }

        ul > li > a:hover{
            color: skyblue;
        }

        button[type]:before{
            position: absolute;
            content: "";
            width: 20px;
            height: 20px;
            top: 2px;
            bottom: 0;
            left: 7px;
            margin: auto;
            background-repeat: no-repeat;
        }

        button[type=unwatch]:before{
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj4gPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTI4OCAxNDRhMTEwLjk0IDExMC45NCAwIDAgMC0zMS4yNCA1IDU1LjQgNTUuNCAwIDAgMSA3LjI0IDI3IDU2IDU2IDAgMCAxLTU2IDU2IDU1LjQgNTUuNCAwIDAgMS0yNy03LjI0QTExMS43MSAxMTEuNzEgMCAxIDAgMjg4IDE0NHptMjg0LjUyIDk3LjRDNTE4LjI5IDEzNS41OSA0MTAuOTMgNjQgMjg4IDY0UzU3LjY4IDEzNS42NCAzLjQ4IDI0MS40MWEzMi4zNSAzMi4zNSAwIDAgMCAwIDI5LjE5QzU3LjcxIDM3Ni40MSAxNjUuMDcgNDQ4IDI4OCA0NDhzMjMwLjMyLTcxLjY0IDI4NC41Mi0xNzcuNDFhMzIuMzUgMzIuMzUgMCAwIDAgMC0yOS4xOXpNMjg4IDQwMGMtOTguNjUgMC0xODkuMDktNTUtMjM3LjkzLTE0NEM5OC45MSAxNjcgMTg5LjM0IDExMiAyODggMTEyczE4OS4wOSA1NSAyMzcuOTMgMTQ0QzQ3Ny4xIDM0NSAzODYuNjYgNDAwIDI4OCA0MDB6Ij48L3BhdGg+IDwvc3ZnPg==");
        }

        button[type=unwatch]:after{
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            top: 6px;
            bottom: 0;
            right: 6px;
            margin: auto;
            border: 5px solid transparent;
            border-top-color: #000;
        }

        button[type=star]:before{
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj4gPHBhdGggZD0iTTI1OS4zIDE3LjhMMTk0IDE1MC4yIDQ3LjkgMTcxLjVjLTI2LjIgMy44LTM2LjcgMzYuMS0xNy43IDU0LjZsMTA1LjcgMTAzLTI1IDE0NS41Yy00LjUgMjYuMyAyMy4yIDQ2IDQ2LjQgMzMuN0wyODggNDM5LjZsMTMwLjcgNjguN2MyMy4yIDEyLjIgNTAuOS03LjQgNDYuNC0zMy43bC0yNS0xNDUuNSAxMDUuNy0xMDNjMTktMTguNSA4LjUtNTAuOC0xNy43LTU0LjZMMzgyIDE1MC4yIDMxNi43IDE3LjhjLTExLjctMjMuNi00NS42LTIzLjktNTcuNCAweiI+PC9wYXRoPiA8L3N2Zz4=")
        }

        button[type=fork]:before{
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj4gPHBhdGggZD0iTTM4NCAxNDRjMC00NC4yLTM1LjgtODAtODAtODBzLTgwIDM1LjgtODAgODBjMCAzNi40IDI0LjMgNjcuMSA1Ny41IDc2LjgtLjYgMTYuMS00LjIgMjguNS0xMSAzNi45LTE1LjQgMTkuMi00OS4zIDIyLjQtODUuMiAyNS43LTI4LjIgMi42LTU3LjQgNS40LTgxLjMgMTYuOXYtMTQ0YzMyLjUtMTAuMiA1Ni00MC41IDU2LTc2LjMgMC00NC4yLTM1LjgtODAtODAtODBTMCAzNS44IDAgODBjMCAzNS44IDIzLjUgNjYuMSA1NiA3Ni4zdjE5OS4zQzIzLjUgMzY1LjkgMCAzOTYuMiAwIDQzMmMwIDQ0LjIgMzUuOCA4MCA4MCA4MHM4MC0zNS44IDgwLTgwYzAtMzQtMjEuMi02My4xLTUxLjItNzQuNiAzLjEtNS4yIDcuOC05LjggMTQuOS0xMy40IDE2LjItOC4yIDQwLjQtMTAuNCA2Ni4xLTEyLjggNDIuMi0zLjkgOTAtOC40IDExOC4yLTQzLjQgMTQtMTcuNCAyMS4xLTM5LjggMjEuNi02Ny45IDMxLjYtMTAuOCA1NC40LTQwLjcgNTQuNC03NS45ek04MCA2NGM4LjggMCAxNiA3LjIgMTYgMTZzLTcuMiAxNi0xNiAxNi0xNi03LjItMTYtMTYgNy4yLTE2IDE2LTE2em0wIDM4NGMtOC44IDAtMTYtNy4yLTE2LTE2czcuMi0xNiAxNi0xNiAxNiA3LjIgMTYgMTYtNy4yIDE2LTE2IDE2em0yMjQtMzIwYzguOCAwIDE2IDcuMiAxNiAxNnMtNy4yIDE2LTE2IDE2LTE2LTcuMi0xNi0xNiA3LjItMTYgMTYtMTZ6Ij48L3BhdGg+IDwvc3ZnPg==");
        }
hewxwshining commented 5 years ago

Demo CSS代码：

/* 代码没高亮，视觉还原有问题，按钮左右高度不一致等 */
summary::-webkit-details-marker {
        display: none;
    }
    details {
        display: inline-block;
    }
    svg {
        vertical-align: -3px;
    }
    .btn-group {
        font-size: 0;
        display: inline-block;
    }
    .btn-group~.btn-group {
        margin-left: 15px;
    }
    .btn-title,
    .btn-link {
        display: inline-block;
        padding: 6px 10px;
        font-size: 14px;
        line-height: inherit;
        border: 1px solid #c5c9cc;
        color: #000;
    }
    .btn-title {
        background-color: #eff3f6;
        background-image: linear-gradient(to bottom, #fafbfc, #eff3f6);
        border-radius: 3px 0 0 3px;
        cursor: pointer;
    }
    summary.dropdown::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        vertical-align: -3px;
        border: 5px solid transparent;
        border-top-color: currentcolor;
    }

    .btn-link {
        background-color: #fff;
        border-left: 0;
        border-radius: 0 3px 3px 0;
        text-decoration: none;
    }

HTML 代码：

  <div class="btn-group">
        <details>
            <summary class="btn-title dropdown">
                <svg t="1571305548535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="18" height="18">
                    <path d="M519.872 168.336C290.768 168.336 95.12 310.848 15.84 512c79.272 201.152 274.928 343.664 504.032 343.664 229.12 0 424.768-142.512 504.04-343.664-79.272-201.152-274.696-343.664-504.04-343.664z m0 572.776c-126.464 0-229.104-102.64-229.104-229.112s102.64-229.104 229.104-229.104c126.472 0 229.12 102.64 229.12 229.104s-102.648 229.112-229.12 229.112z m0-366.568c-75.832 0-137.464 61.624-137.464 137.456s61.632 137.464 137.464 137.464S657.344 587.84 657.344 512s-61.632-137.456-137.472-137.456z m0 0" p-id="3154"></path>
                </svg>
                <span>Unwatch</span>
            </summary>
        </details>
        <a class="btn-link" href="javscript:;">63</a>
    </div>
    <div class="btn-group">
        <details>
            <summary class="btn-title">
                <svg t="1571365310109" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2549" width="18" height="18">
                    <path d="M511.647966 65.011715l147.751013 261.631012 300.466322 87.079348L750.703761 661.444666l37.962388 297.490405L511.646942 832.041062 234.632853 958.935071l37.960341-297.490405L63.430631 413.722075l300.468369-87.079348L511.647966 65.011715" p-id="2550"></path>
                </svg>
                <span>Star</span>
            </summary>
        </details>
        <a class="btn-link" href="javscript:;">445</a>
    </div>
    <div class="btn-group">
        <details>
            <summary class="btn-title">
                <svg t="1571365411496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3443" width="18" height="18">
                    <path d="M426.666667 234.666667C426.666667 152.32 359.68 85.333333 277.333333 85.333333S128 152.32 128 234.666667c0 68.352 46.421333 125.482667 109.184 143.146666 7.082667 50.474667 33.664 136.832 131.712 174.037334C469.333333 590.037333 469.333333 620.117333 469.333333 640v6.954667c-61.44 18.517333-106.666667 74.965333-106.666666 142.378666 0 82.346667 66.986667 149.333333 149.333333 149.333334s149.333333-66.986667 149.333333-149.333334c0-67.413333-45.226667-123.861333-106.666666-142.378666V640c0-19.882667 0-49.962667 100.437333-88.106667 98.048-37.205333 124.629333-123.562667 131.712-174.037333C849.578667 360.149333 896 303.018667 896 234.666667 896 152.32 829.013333 85.333333 746.666667 85.333333S597.333333 152.32 597.333333 234.666667c0 66.218667 43.605333 121.813333 103.424 141.354666-6.229333 31.36-24.106667 76.416-75.861333 96.085334-50.858667 19.285333-87.594667 40.661333-112.896 65.536-25.301333-24.874667-61.994667-46.250667-112.896-65.536-51.754667-19.669333-69.674667-64.725333-75.861333-96.085334C383.061333 356.48 426.666667 300.885333 426.666667 234.666667zM746.666667 170.666667c35.285333 0 64 28.714667 64 64S781.952 298.666667 746.666667 298.666667 682.666667 269.952 682.666667 234.666667 711.381333 170.666667 746.666667 170.666667z m-170.666667 618.666666c0 35.285333-28.714667 64-64 64s-64-28.714667-64-64 28.714667-64 64-64 64 28.714667 64 64zM277.333333 298.666667C242.048 298.666667 213.333333 269.952 213.333333 234.666667S242.048 170.666667 277.333333 170.666667 341.333333 199.381333 341.333333 234.666667 312.618667 298.666667 277.333333 298.666667z" fill="" p-id="3444"></path>
                </svg>
                <span>Fork</span>
            </summary>
        </details>
        <a class="btn-link" href="javscript:;">445</a>
    </div>
asyncguo commented 5 years ago

demo

<ul class="button-group">
  <li>
    <button class="btn watch">
      <svg class="watch v-align-text-bottom" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
      Unwatch
    </button>
    <a href="/" class="social-count" aria-label="63 users are watching this repository">63</a>
  </li>
  <li>
    <button class="btn">
      <svg class="star v-align-text-bottom" viewBox="0 0 14 16" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
      Star
    </button>
    <a href="/" class="social-count" aria-label="445 users starred this repository">445</a>
  </li>
  <li>
    <button class="btn">
      <svg class="repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
      Fork
    </button>
    <a href="/" class="social-count" aria-label="25 users forked this repository">25</a>
  </li>
</ul>
/* 链接颜色有问题，以及按钮组永远一行显示没能支持 */
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style-type: none;
}
.button-group{
  display: flex;
  font-size: 0;
  color: #24292e;
}
.button-group li:not(:last-child){
  margin-right: 10px;
}
.btn{
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid rgba(27,31,35,.2);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
}
.btn:hover{
  background-color: #e6ebf1;
  background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
  background-position: -.5em;
  border-color: rgba(27,31,35,.35);
}
.v-align-text-bottom{
  vertical-align: text-bottom;
}
.btn.watch{
  position: relative;
  padding-right: 20px;
}
.btn.watch::after{
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(calc(-50% + 2px));
  border: 4px solid transparent;
  border-top-color: currentColor;
}
.social-count{
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  font-weight: 600;
  line-height: 20px;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  text-decoration: none;
}
.social-count:hover{
  color: #0366d6;
}
Despair-lj commented 5 years ago

demo

<ul class="icon-container">
  <li class="icon-group">
    <a class="icon-description" href="javascript:void;" role="button" icon-watch>
      Unwatch
    </a>
    <a class="icon-number" href="javascript:void;" role="button" aria-label="63 users are watching this repository">63</a>
  </li>
  <li class="icon-group">
    <a class="icon-description" href="javascript:void;" role="button" icon-star>
      Star
    </a>
    <a class="icon-number" href="javascript:void;" role="button" aria-label="445 users starred this repository">445</a>
  </li>
  <li class="icon-group">
    <a class="icon-description" href="javascript:void;" role="button" icon-fork>
      Fork
    </a>
    <a class="icon-number" href="javascript:void;" role="button" aria-label="25 users forked this repository">25</a>
  </li>
</ul>
/* 视觉还原不错，NaN问题找到原因很屌 +1分 */
.icon-container {
  padding:0;
  font-size: 0;
}
.icon-group {
  display: inline-block;
  margin-left: 10px;
  list-style-type: none;
}
.icon-group a {
  display: inline-block;
  line-height: 26px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #24292e;
}
.icon-description {
  padding: 0 10px 0 30px;
  border: 1px solid rgba(27,31,35,.2);
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(to bottom,#fafbfc,#eff3f6);
}
.icon-description:hover {
  border-color: rgba(27,31,35,.35);
  background-image: linear-gradient(to bottom,#f0f3f6,#e6ebf1 90%);
}
.icon-number {
  padding: 0 10px;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-radius: 0 3px 3px 0px;
}
.icon-number:hover {
  color: #0366d6;
}

.icon-description::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 5px 0 0 -20px;
}

.icon-description[icon-watch]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z'/%3E%3C/svg%3E");
}
.icon-description[icon-star]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z'/%3E%3C/svg%3E");
}
.icon-description[icon-fork]::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z'%3E%3C/path%3E%3C/svg%3E")
}

题外话

关于张老师的 svg 工具返回 NaN 的原因是因为这个按钮的 Arcs 路径将两个为 0 的参数连接起来，导致 svgo 判断为一个参数，此时参数数量不足所以返回了 NaN. Image

// 如上图框着的参数，正确的参数数组应该是
arr = ['1.993', '1.993', '0', '0', '0', '-1', '3.72'];
// 但是根据 svgo 的判断是返回如下的参数
arrSvgo = ['1.993', '1.993', '0', '0', '-1', '3.72'];

我自己的解决方法是将如下的正则表达式替换

S = /[-+]?(?:\d*\.\d+|\d+\.?)([eE][-+]?\d+)?/g;
newS = /0|[-+]?(?:\d*\.\d+|\d+\.?)([eE][-+]?\d+)?/g;
fzpijl commented 5 years ago

demo

<ul>
    <li class="list-item">
        <button class="arrow-down">
            <svg class="svg" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                <path fill-rule="evenodd"
                    d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
                </path>
            </svg>Watch
        </button>
        <a href="#">63</a>
    </li>
    <li class="list-item">
        <button>
            <svg class="svg" viewBox="0 0 14 16" version="1.1" width="14" height="16">
                <path fill-rule="evenodd"
                    d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
            </svg>Star
        </button>
        <a href="#">445</a>
    </li>
    <li class="list-item">
        <button>
            <svg class="svg" viewBox="0 0 10 16" version="1.1" width="10" height="16">
                <path fill-rule="evenodd"
                    d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
                </path>
            </svg>Fork
        </button>
        <a href="#">25</a>
    </li>
</ul>
ul {
    list-style: none;
    padding: 0;
}
.list-item {
    display: inline-block;
    margin-right: 12px;
}

a {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 10px;
    text-decoration: none;
    color: #444;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 0 3px 3px 0;
    border-left-color: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
a:hover {
    color: rgb(76, 133, 230);
}

button {
    display: flex;
    padding: 6px 10px;
    border: 1px solid rgba(27, 31, 35, .2);
    border-radius: 3px 0 0 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    float: left;
    background-color: #EFF3F5;
    margin-right: -1px;
    outline: none;
}

button:hover {
    border-color: #aaa;
    background-color: rgb(224, 229, 233);
}

button:active {
    background-color: #f5f5f5;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.arrow-down:after {
    content: '';
    transform: translate(2px, 7px);
    border-width: 4px;
    border-style: solid;
    border-color: #444 transparent transparent;
}
.svg {
    margin-right: 3px;
}
les-lee commented 5 years ago

Demo 在这里

偷了一些效果颜色和渐变

<div class="test13-block">
    <details>
      <summary><span><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>unWatch</span></summary>
      <div class="details">
        我是隐藏的菜单
      </div>
    </details>
    <a href="https://github.com/zhangxinxu/quiz/watchers">63</a>
  </div>
  <div class="test13-block">
    <button>
      <span></span><svg viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>Star</span>
    </button>
    <a href="https://github.com/zhangxinxu/quiz/stargazers">445</a>
  </div>
  <div class="test13-block">
    <button>
      <span><svg viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>Star</span>
    </button>
    <a href="https://github.com/zhangxinxu/quiz/network/members">25</a>
  </div>
/* zxx: 这个视觉还原，一看就知道平时工作不是写页面样式的 */
details ::-webkit-details-marker {
      display: none;
    }
    details ::-moz-list-bullet {
      font-size: 0;
    }
    details:focus {
      box-shadow: 0 0 0 0.2em rgba(3,102,214,.3);
    }
    details {
      user-select: none;
      position: relative;
      font-size: inherit;
    }
    summary {
      outline: none;
      color: black;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    button {
      font-family: inherit;
    }

    .test13-block {
      --padding: 5px;
      display: inline-block;
      margin-right: 20px;
      font-size: 18px;
    }
    .test13-block a:hover {
      color: #0366d6;
      cursor: pointer;
    }
    .test13-block a {
      float: left;
      vertical-align: middle;
      padding: 5px 8px;
      color: black;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border: 1px solid #333;
      border-left: 0;
    }
    .test13-block svg{
      vertical-align: -1px;
      margin-right: 3px;
    }

    .test13-block button:hover,
    .test13-block details:hover {
      cursor: pointer;
      background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
      border-color: rgba(27,31,35,.35);
    }
    .test13-block details .details {
      position: absolute;
      top: 100%;
      width: 200px;
    }

    .test13-block button,
    .test13-block details {
      float: left;
      vertical-align: middle;
      background: #eff3f6;
      border: 1px solid #666;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      font-size: inherit;
      padding: 5px 10px;
    }
ziven27 commented 5 years ago

DEMO: Jsbin

<style>

/* ACSS */
.fs0 {
  font-size: 0;
}

.mr8 {
  margin-right: 8px;
}

/* icon */
.i {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.i_arrow_down {
  height: 0;
  width: 0;
  border-top: 4px solid;
  border-left: 4px dashed transparent;
  border-right: 4px dashed transparent;
}

/* btn */
.btn {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 1px solid rgb(198, 200, 204);
  border-radius: 3px;
  font-size: 12px;
  box-sizing: border-box;
  user-select: none;
  vertical-align: middle;
  font-weight: 600;
  color: #24292e;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  cursor: pointer;
  line-height: 16px;
  padding: 5px 10px;
  transition: 200ms;
  text-transform: capitalize;
  white-space: nowrap;
}

a.btn {
  text-decoration: none;
}

.btn:hover {
  border-color: rgb(162, 165, 170);
}

.btn:active {
  background-color: #eff3f6;
}
/* btn-base */
.btn-base {
  color: #24292e;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
  font-size: 0;
}

.btn-base strong {
  font-size: 12px;
  vertical-align: middle;
  font-weight: 600;
}

.btn-base .i {
  font-size: 16px;
}

.btn-base .i+strong,
.btn-base strong+.i {
  margin-left: 2px;
}

.btn-base:hover {
  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
  background-position: -.5em;
}

/* btn-ghost */
.btn-ghost:hover {
  color: #0366d6;
}

/* btn-group */
.btn-group {
  display: inline-block;
  font-size: 0;
}

.btn-group .btn:hover {
  position: relative;
}

.btn-group .btn {
  border-radius: 3px 0 0 3px;
}

.btn-group .btn +.btn {
  margin-left: -1px;
  border-radius: 0 3px 3px 0;
}
</style>

<div class="btn-groups">
    <span class="btn-group mr8">
        <button type="button" class="btn btn-base" title="Watch me">
            <svg class="i" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
                </path>
            </svg>
            <strong>Unwatch</strong>
            <i class="i i_arrow_down"></i>
        </button>
        <a href="##" title="Watch Number 63" class="btn btn-ghost">63</a>
    </span>
    <span class="btn-group mr8">
        <button type="button" class="btn btn-base" title="Star me">
            <svg class="i" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
            </svg>
            <strong>Star</strong>
        </button>
        <a href="##" title="Star Number 445" class="btn btn-ghost">445</a>
    </span>
    <span class="btn-group">
        <button type="button" class="btn btn-base" title="Fork me">
            <svg class="i" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
                </path>
            </svg>
            <strong>Fork</strong>
        </button>
        <a href="##" title="Fork Number 25" class="btn btn-ghost">25</a>
    </span>
</div>
ShineaSYR commented 5 years ago

demo

<p>以下为CSS基础测试13</p>
    <h3>GitHub按钮样式</h3>
    <ul class="gb-ul">
        <li class="gb-li">
        <button class="gb-btn"><i class="icon icon-view "></i>Unwatch</button>
        <a href="#" class="gb-link">63</a>
        </li>
        <li class="gb-li">
        <button class="gb-btn"><i class="icon icon-star"></i>Star</button>
        <a class="gb-link">445</a>
        </li>
        <li class="gb-li">
        <button class="gb-btn"><i class="icon icon-fork"></i>Fork</button>
        <a class="gb-link">25</a>
        </li>
    </ul>
    <p>以上为CSS基础测试13</p>
/* zxx: 视觉还原有待加强 */
ul,li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #24292E;
        }
        .gb-ul {
            overflow: hidden;
            font-size: 0;
        }
        .gb-btn, .gb-link {
            font-size: 12px;
            line-height: 20px;
            color: #24292E;
        }
        .gb-li {
            border: 1px solid rgba(27,31,35,.2);
            border-radius: 4px;
            margin-right: 12px;
            margin-bottom: 4px;
            background-color: #fff;
            display: inline-block;
        }
        .gb-btn {
            padding: 3px 10px;
            background-color: #eff3f6;
            background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
            border: none;
            background-color: transparent;
            border-radius: 0;
            border-right: 1px solid rgba(27,31,35,.2);
            border-radius: 3px 0 0 3px;
        }
        .gb-link {
            padding: 3px 10px;
        }
        .icon {
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 100% auto;
            width:16px; height:16px;
            vertical-align: -3px;
        }
        .icon-view {
            background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1615 1024' xmlns='http://www.w3.org/2000/svg' width='37.852' height='24'%3E%3Cpath d='M1612.257 498.102A884.953 884.953 0 0 0 807.754.042 884.953 884.953 0 0 0 3.25 498.102a32.911 32.911 0 0 0 0 28.524 884.953 884.953 0 0 0 804.504 497.329 884.953 884.953 0 0 0 804.503-498.06 32.911 32.911 0 0 0 0-27.793zM807.754 863.785A357.638 357.638 0 0 1 442.07 511.998a357.638 357.638 0 0 1 365.684-353.25 357.638 357.638 0 0 1 365.683 353.25 358.37 358.37 0 0 1-365.683 353.25zm0-537.554a184.304 184.304 0 1 0 189.423 185.767 187.23 187.23 0 0 0-189.423-184.304z' fill='%23292929'/%3E%3C/svg%3E") no-repeat center/100%;
        }
        .icon-star {
            background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M768 937.6c-6.4 0-9.6 0-16-3.2l-243.2-128-243.2 128c-9.6 6.4-22.4 3.2-35.2-3.2-9.6-6.4-16-19.2-12.8-32l44.8-268.8-195.2-192c-9.6-9.6-12.8-22.4-9.6-32s12.8-19.2 25.6-22.4L352 345.6 473.6 99.2c9.6-22.4 48-22.4 57.6 0l121.6 246.4L921.6 384c12.8 3.2 22.4 9.6 25.6 22.4s0 25.6-9.6 32l-195.2 192 44.8 268.8c3.2 12.8-3.2 25.6-12.8 32 6.4 6.4 0 6.4-6.4 6.4z' fill='%23292929'/%3E%3C/svg%3E") no-repeat center/100%;
        }
        .icon-stri {
            background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9.5l5 5 5-5H7z' fill='%23000'/%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='7' y='9' width='10' height='6'%3E%3Cpath d='M7 9.5l5 5 5-5H7z' fill='%23fff'/%3E%3C/mask%3E%3C/svg%3E") no-repeat center/100%;
        }
        .icon-fork {
            background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M752 100c-61.8 0-112 50.2-112 112 0 47.7 29.9 88.5 72 104.6v27.6L512 601.4 312 344.2v-27.6c42.1-16.1 72-56.9 72-104.6 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 50.6 33.8 93.5 80 107.3v34.4c0 9.7 3.3 19.3 9.3 27L476 672.3v33.6c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-33.6l226.7-291.6c6-7.7 9.3-17.3 9.3-27v-34.4c46.2-13.8 80-56.7 80-107.3 0-61.8-50.2-112-112-112zM224 212c0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48-48-21.5-48-48zm336 600c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm192-552c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z' fill='%23292929'/%3E%3C/svg%3E") no-repeat center/100%;
        }
silverWolf818 commented 5 years ago

预览地址

<div class="c-btn-content">
    <details>
        <summary class="c-btn"><svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
            Watch </summary>
    </details><a href="#">64</a>
</div>
<div class="c-btn-content">
    <button class="c-btn"><svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
        Star</button><a href="#">445</a>
</div>
<div class="c-btn-content">
    <button class="c-btn"><svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
        Fork</button><a href="#">25</a>
</div>
/* zxx：视觉还原有待加强，对齐，颜色以及字体都有问题 */
summary::-webkit-details-marker {
    display: none;
}

details {
    display: inline-block;
}
svg{
    display: inline-block;
    vertical-align: text-bottom;
}
.c-btn-content {
    float: left;
    margin: 0 10px 0 0;
}
.c-btn-content summary::after{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: -2px;
    content: "";
    border: 4px solid transparent;
    border-top-color: currentcolor;
}
.c-btn-content .c-btn {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 20px;
    color: #24292e;
    color: #24292e;
    background-color: #eff3f6;
    border: 1px solid rgba(27, 31, 35, .2);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.c-btn-content a {
    display: inline-block;
    text-decoration: none;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #24292e;
    background-color: #fff;
    border: 1px solid rgba(27, 31, 35, .2);
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
wingmeng commented 5 years ago

> 在线 Demo <

<div class="btn-group-container">
  <div class="btn-group">
    <details class="details-menu">
      <summary class="details-menu-btn btn btn-default" role="button" aria-label="watch">
        <svg class="svg-icon">
          <use xlink:href="#icon-watch"></use>
        </svg>
        Unwatch
      </summary>
      <div class="details-menu-modal">
        菜单（略）
      </div>
    </details>
    <a class="btn btn-link" href="#" aria-label="63 users are watching this repository">63</a>
  </div>
  <div class="btn-group">
    <button class="btn btn-default" aria-label="star">
      <svg class="svg-icon">
        <use xlink:href="#icon-star"></use>
      </svg>
      Star
    </button>
    <a class="btn btn-link" href="#" aria-label="445 users starred this repository">445</a>
  </div>
  <div class="btn-group">
    <button class="btn btn-default" aria-label="fork">
      <svg class="svg-icon">
        <use xlink:href="#icon-fork"></use>
      </svg>
      Fork
    </button>
    <a class="btn btn-link" href="#" aria-label="25 users forked this repository">25</a>
  </div>
</div>

<svg style="display:none">
  <!-- svg sprite (代码略) -->
</svg>
/* zxx: 视觉还原OK，布局也很稳健，就算低头皇冠也不会掉 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/** 主容器 **/
.btn-group-container {display: flex;}

/** 按钮组 **/
.btn-group {
  display: flex;
  align-items: center;
}

.btn-group + .btn-group {margin-left: 10px;}
.btn-group .btn {border-radius: 0;}
.btn-group > .btn:not(:first-child),
.btn-group > .details-menu:not(:first-child) {margin-left: -1px;}

.btn-group > .btn:first-child,
.btn-group > .details-menu:first-child > .btn {
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

.btn-group > .btn:last-child,
.btn-group > .details-menu:last-child > .btn {
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
}

/** 按钮 **/
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: inherit;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid #ccced0;
  border-radius: .25em;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn:hover {z-index: 1;}

.btn > .svg-icon {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  fill: currentColor;
  speak: none;
}

/** 按钮主题定义 **/
.btn-default {
  color: #24292e;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
}

.btn-default:hover {
  background-color: #e6ebf1;
  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
  background-position: -.5em;
  border-color: #a5a8ac;
}

.btn-link {
  color: #24292e;
  background-color: #fff;
}

.btn-link:hover {color: #0366d6;}

/** 按钮下拉菜单 **/
.details-menu {
  position: relative;
  display: block;

}

.details-menu-btn::-webkit-details-marker {display:none;}
.details-menu-btn::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 3px;
  transform: translateY(25%);
  border: 4px solid transparent;
  border-top-color: currentColor;
}

.details-menu-modal {
  position: absolute;
}
hangfengnice commented 5 years ago

demo

/* zxx: 只能给个基础分了 */
      ul {
        padding: 0;
        display: flex;
      }
      li {
        list-style: none;
        margin-right: 16px;
        border: 1px solid #c5c9cc;
        border-radius: 3px;
        padding: 1px 0 2px; 
      }
      a {
        text-decoration: none;
        color: #111;
        padding: 3px;
        font-weight: 500;
        font-size: 14px;
      }
      .num {
        border-left: 1px solid #c5c9cc;
      }
      .num:hover {
        color: rgb(39, 140, 223);
      }
      .icon {
        padding-left: 20px;
        background-color: #eff3f6;
      }
      .icon:hover {
        background-color: #e1e7eb;
      }
      .star {
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z'/%3E%3C/svg%3E") no-repeat 2px;
      }
      .pull {
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%2324292e' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z'%3E%3C/path%3E%3C/svg%3E") no-repeat 3px;
      }
      .watch {
        background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' class='octicon octicon-eye v-align-text-bottom' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z'/%3E%3C/svg%3E") no-repeat 2px;};

html


 <ul>
      <li>
        <a class='icon watch' href="#">Watch</a><a class='num' href="#">63</a>
      </li>
      <li>
        <a class='icon star' href="#">Unstar</a><a class='num' href="#">445</a>
      </li>
      <li>
        <a class='icon pull' href="#">Fork</a><a class='num' href="#">25</a>
     </li>
 </ul>
JaimeCheng commented 5 years ago

>在线demo<

<form class="social-form">
  <details class="select-menu">
    <summary class="select-menu-button btn"aria-haspopup="menu" role="button"> 
      <span>
        <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
          </path>
        </svg>
        Unwatch
      </span>
    </summary>
  </details>
  <a class="social-count" href="#">64</a>
</form>
<form class="social-form">
  <button type="submit" class="btn btn-with-count"> 
    <svg viewBox="0 0 14 16" version="1.1" width="14" height="16"
      aria-hidden="true">
      <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z">
      </path>
    </svg>
    Star
  </button>
  <a class="social-count" href="#">445</a>
</form>
<form class="social-form">
  <button type="submit" class="btn btn-with-count">
    <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true">
      <path fill-rule="evenodd"
        d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
      </path>
    </svg>
    Fork
  </button>
  <a class="social-count" href="#">25</a>
</form>
* {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
[role=button]:focus, button { outline: none; box-shadow: none; }
summary::-webkit-details-marker { display:none; }
svg { display: inline-block; vertical-align: text-bottom; fill: currentColor; }
.select-menu { cursor: pointer; }
.btn {
  float: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 3px 0 0 3px;
  color: #24292e;
  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
  border: 1px solid rgba(27,31,35,.2);
}
.select-menu-button:after {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: -2px;
  content: "";
  border: 4px solid transparent;
  border-top-color: currentcolor;
}
.social-count {
  float: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #24292e;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  text-decoration: none;
  margin-right: 10px;
}
rayj1993 commented 5 years ago

demo

/* zxx: 视觉还原有待加强  */
    css-icon {
            display: inline-block;
            height: 1em;
            width: 1em;
            font-size: 16px;
            box-sizing: border-box;
            text-indent: -9999px;
            vertical-align: -4px;
            position: relative;
        }

        css-icon::before,
        css-icon::after {
            content: '';
            box-sizing: inherit;
            position: absolute;
            left: 50%;
            top: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .icon-caret::before {
            border: .3em solid transparent;
            border-top-color: currentColor;
            -ms-transform: translate(-50%, -25%);
            transform: translate(-50%, -25%);
        }

        svg {
            height: 20px;
            vertical-align: -5px;
        }

        .i-btn-group {
            display: flex;
        }

        .i-btn {
            margin-left: 10px;
            font-size: 0;
        }

        .i-btn-operation {
            border: 1px solid #c4c8cc;
            color: #24292e;
            font-size: 12px;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 3px 0 0 3px;
            text-decoration: none;
            background-color: #eff3f6;
            background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
        }

        .i-btn-operation:hover {
            border-color: #a5a9ac;
        }

        .i-btn-count {
            border: 1px solid #c4c8cc;
            border-left: none;
            color: #24292e;
            font-size: 12px;
            padding: 5px;
            border-radius: 0 3px 3px 0;
            text-decoration: none;
        }

        .i-btn-count:hover {
            color: #0366d6;
        }
<div class="i-btn-group">
        <div class="i-btn">
            <a href="javascript:" class="i-btn-operation">
                <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16"
                    height="16" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
                    </path>
                </svg>
                watch
                <css-icon class="icon-caret"></css-icon>
            </a>
            <a href="javascript:" class="i-btn-count">64</a>
        </div>
        <div class="i-btn">
            <a href="javascript:" class="i-btn-operation">
                <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14"
                    height="16" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
                </svg>
                Unstar
            </a>
            <a href="javascript:" class="i-btn-count">445</a>
        </div>
        <div class="i-btn">
            <a href="javascript:" class="i-btn-operation">
                <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1"
                    width="10" height="16" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
                    </path>
                </svg>
                Fork</a>
            <a href="javascript:" class="i-btn-count">25</a>
        </div>
    </div>
zy017 commented 5 years ago

demo

<div class="btn-box">
    <details>
        <summary class="unwatch-text">
            <svg class="icon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
                </path>
            </svg>
            Unwatch
        </summary>
        <div class="content">内容</div>
    </details>
    <a class="info" href="#">63</a>
</div>
<div class="btn-box">
    <button class="btn">
        <svg class="icon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
        </svg>
        Star
    </button>
    <a class="info" href="#">445</a>
</div>
<div class="btn-box">
    <button class="btn">
        <svg class="icon-star" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
            <path fill-rule="evenodd"
                d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path>
        </svg>
        Fork
    </button>
    <a class="info" href="#">25</a>
</div>

/* zxx: 布局健壮性就你最好了，要是视觉还原好一点就可以满分了 */
summary::-webkit-details-marker {
    display: none;
}

.btn-box {
    font-size: 12px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
}

details {
    position: relative;
}

.btn-box+.btn-box {
    margin-left: 10px;
}

.info {
    padding: 0 8px;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(27, 31, 35, .2);
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #000;
    text-decoration: none;
}

summary,
.btn {
    box-sizing: content-box;
    font-size: 12px;
    border-radius: 3px 0 0 3px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    height: 28px;
    border: 1px solid rgba(27, 31, 35, .2);
    color: #24292e;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
    cursor: pointer;
}

.unwatch-text:after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: -2px;
    content: "";
    transform: translateY(25%);
    border: 4px solid transparent;
    border-top-color: currentcolor;
    margin-left: 5px;
}

.content {
    position: absolute;
}

.icon-eye,
.icon-star {
    margin-right: 5px;
}
lifelikejuly commented 5 years ago

Demo 签到

GCGligoudan commented 5 years ago

在线Demo

<div class="container">
  <ul>
    <li>
      <button class="btn button">
        <span>
          <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
          Watch
        </span>
      </button>
      <a>65</a>
    </li>
    <li>
      <button class="btn button">
        <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
        Star
      </button>
      <a>445</a>
    </li>
    <li>
      <button class="btn button">
        <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
        Fork
      </button>
      <a>26</a>
    </li>
  </ul>
</div>
/* zxx: 视觉还原可以 */
li{
  float: left;
  margin: 0 10px 0 0;
  font-size: 11px;
  color: #24292e;
  list-style-type: none;
}
.btn {
  position: relative;
  display: inline-block;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-repeat: repeat-x;
  background-position: -1px -1px;
  background-size: 110% 110%;
  border: 1px solid rgba(27,31,35,.2);
  border-radius: .25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.button{
  padding: 3px 10px;
  font-size: 12px;
  line-height: 20px;
  float: left;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #24292e;
  background-color: #eff3f6;
  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
}
svg{
  vertical-align: text-bottom;
}
a{
  float: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #24292e;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
a:hover{
  color: #0366d6;
  cursor: pointer;
}
tao1874 commented 5 years ago

Demo


        * {
            box-sizing: border-box;
        }

        ul {
            display: flex;
            font-size: 12px;
        }

        li {
            list-style: none;
            margin: 0 5px;
            display: flex;
        }

        a {
            display: flex;
            padding: 3px 10px;
            border-left: 0;
            border: 1px solid rgba(27, 31, 35, 0.2);
            border-radius: 0.25em;
            line-height: 20px;
            text-decoration: none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        button {
            line-height: 20px;
            padding: 3px 10px;
            background-color: #eff3f6;
            border: 1px solid rgba(27, 31, 35, 0.2);
            border-radius: 0.25em;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        button:hover {
            background-color: #e6ebf1;
        }

        svg {
            vertical-align: text-bottom;
        }
frankyeyq commented 5 years ago

demo

<ul>
    <li class="clearfix">
        <details class="btn watch">
            <summary> 
                <svg class="btn-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
                Unwatch 
            </summary>
        </details>
        <a class="social-count">63</a>
    </li>
    <li class="clearfix">
        <button class="btn star">
            <svg class="btn-icon" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
            Star
        </button>
        <a class="social-count">445</a>
    </li>
    <li class="clearfix">
        <button class="btn fork">
            <svg class="btn-icon" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
            Fork
        </button>
        <a class="social-count">25</a>
    </li>
</ul>
ul, li {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    margin-right: 10px;
    float: left;
}
.clearfix:before, .clearfix:after {
    display:table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.watch ::-webkit-details-marker {
    display: none;
}
.watch {
    display: inline-block;
    position: relative;
}
.watch summary::after {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: -2px;
    content: "";
    border: 4px solid transparent;
    border-top-color: currentcolor;
}

.btn {
    font-size: 12px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    float: left;
    line-height: 20px;
    color: #24292e;
    background-color: #eff3f6;
    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    border: 1px solid rgba(27,31,35,.2);
    padding: 3px 10px;
    border-radius: .25em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn, .watch summary {
    cursor: pointer;
}
.btn:focus, .watch summary:focus {
    outline: none;
}
.social-count {
    float: left;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #24292e;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid rgba(27,31,35,.2);
    border-left: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.btn-icon {
    vertical-align: text-bottom;
}
zhangxinxu commented 5 years ago

本期要点：

  1. 90后都快30岁了，所以，按钮，我们没有任何理由使用<a>标签，除非你要兼容IE7，所以标签使用应该是 button + a。
  2. 可以考虑多按钮，多链接时候的样式表现，会更健壮，扩展性更强。
  3. 每个按钮组是不能换行的，按钮组可以使用flex布局，如果考虑兼容，可以里面内联 + white-space:nowrap;
  4. 按钮组的实现方法，大家实现有3种（inline-block，float，inline-flex），如果考虑要点3， float布局是不推荐的，因为当下是无法阻止float内容不换行的。table布局其实是上上之选，天然一行显示，兼容到IE8。
  5. 每个按钮控制不要使用标签选择器，而是树结构伪类，例如:first-child，:last-child，例如圆角：:first-child{border-radius: 3px 0 0 3px;}:last-child{border-radius: 0 3px 3px 0;}。此时就非常强，不要使用标签以及类名进行判断。
  6. 同样的，中间的线要走合并，每一个元素都要有完整的边框，（如margin负值合并），而不是根据标签类型进行缺省。