Bootstrap Snippet social spin using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="none" onload="if(media!='all')media='all'"">
<div class="container">
    <div class="row">
        <div class="socialbox">
            <ul class="list-inline">
                <li><a href="https://facebook.com" title="leslie social link" title="facebook"><i class="fa fa-facebook"></i></a><span class="fb">facebook</span></li>
                <li><a href="https://twitter.com" title="leslie social link" title="twitter"><i class="fa fa-twitter"></i></a><span>twitter</span></li>
                <li><a href="https://linkedin.com" title="leslie social link" title="linkedin"><i class="fa fa-linkedin"></i></a><span>linkedin</span></li>
                <li><a href="https://spotify.com" title="leslie social link" title="spotify"><i class="fa fa-spotify"></i></a><span>spotify</span></li>
            </ul>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.container {
    padding-top: 30px;
    border: thin solid #ddd;
    min-height: 90px;
}
.socialbox {
    max-width: 318px;
    margin: 0 auto;
}
.socialbox li {
    position: relative;
    font-size: 19px;
    height: 32px;
    width: 32px;
    text-align: center;
    line-height: 30px;
    background: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 2px 7px 2px 7px;
    box-shadow: 0 1px 1px #bbb;
    cursor: pointer;
    margin-left: 8px;
    z-index: 20;
}
.socialbox li:first-child {
    margin-left: 0;
}
.socialbox li span {
    z-index: 10;
    font-size: 93.8%;
    position: absolute;
    left: -13px;
    color: rgba(202, 202, 202, .85);
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
        -ms-transform: rotate(-45deg); /* IE 9 */
            transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .8s ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social spin"
Bootstrap 3.3.0 Snippet by tradesouthwest

Related: See More

Questions / Comments:

"social spin" Bootstrap 3.3.0 Snippet by tradesouthwest

Related: See More

Questions / Comments:

"social spin"
Bootstrap 3.3.0 Snippet by tradesouthwest