Edit in JSFiddle

                <ul class="icon">
                    <li class="li01"><span class="link">01</span></li>
                    <li class="li02"><span class="link">02</span></li>
                    <li class="li03"><span class="link">03</span></li>
                    <li class="li04"><span class="link">04</span></li>
                    <li class="li05"><span class="link">05</span></li>
                    <li class="li06"><span class="link">06</span></li>
                </ul>

.icon {
     margin:20px;
     float: left;
     padding-left: 33px;
}

.icon li {
     float: left;
     padding-right: 15px;
     cursor: pointer;
}

/* 円の内側からborder47px→3pxへ変化させる */
.icon li .link {
     display: block;
     position: relative;
     z-index: 1;
     width: 47px;
     height: 47px;
     background:#999;
     /*パディングとボーダーを幅と高さに含める*/
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
    /* 円の内側からborder23px→3pxへ変化させる */
     border: solid 23px rgba(95,85,73, 0);
     /* 四角画像を円に */
     border-radius: 50%;
     text-indent: -9999px;
     /*変化時間*/
     -webkit-transition: 0.2s ease;
     -moz-transition: 0.2s ease;
     -ms-transition: 0.2s ease;
     -o-transition: 0.2s ease;
     transition: 0.2s ease;
}

.icon li .link:hover,
.icon li.active .link {
     -webkit-box-shadow: 0 1px 3px 0 rgba(94,84,73,.35);
     box-shadow: 0 1px 3px 0 rgba(94,84,73,.35);
    /* 円の内側からborder23px→3pxへ変化させる */
     border: solid 3px #5F5549;
     /*変化時間*/
     -webkit-transition: 0.5s ease;
     -moz-transition: 0.5s ease;
     -ms-transition: 0.5s ease;
     -o-transition: 0.5s ease;
     transition: 0.5s ease;
}