2016年6月

直接上代码了，只是为了记录一个自己常用的示例：

  • GooglePlus
  • LinkedIn
  • Picasa
  • Wikipedia

HTML 代码

<ul class="actions-list">  
    <li class="action-item facebook">
        Facebook
    </li>
    <li class="action-item google">
        GooglePlus
    </li>
    <li class="action-item linkedin">
        LinkedIn
    </li>
    <li class="action-item picasa">
        Picasa
    </li>
    <li class="action-item twitter">
        Twitter
    </li>
    <li class="action-item wikipedia">
        Wikipedia
    </li>
</ul>

CSS 代码

/* Flex box define */
.actions-list {
    display: -webkit-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;  
}

.actions-list .action-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    overflow: hidden;
}

/* Design: widths, colors, borders, etc... */
.actions-list {
    margin: 0;
    padding: 0;
}
.actions-list .action-item {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: lighter;
    cursor: pointer;
    background-color: #66bbcc;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    color: #000000;
    padding-left: 52px;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 32px;
    line-height: 52px;
    height: 52px;
    max-width: 50px;
}
.actions-list .action-item:hover {
    max-width: 150px;
    background-color: #ff9966;
    padding-right: 10px;
}
.actions-list .action-item:first-child {
    border: none;
}

.facebook {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/3022132263.png);
}
.google {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/3814450726.png);
}
.linkedin {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/650013350.png);
}
.picasa {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/887720659.png);
}
.twitter {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/1628655408.png);
}
.wikipedia {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/305452685.png);
}