MooToolified Screencasts Button (CSS3)

MooToolified Screencasts Button (CSS3)

by Oski Krawczyk

HTML

<ul class="postActions">
    <li>
        <a title="" href="#">
            <span></span>
            <strong></strong>
        </a>
    </li>
    <li>
        <a title="" href="#">
            <span></span>
            <strong></strong>
        </a>
    </li>
    <li>
        <a title="" href="#">
            <span></span>
            <strong></strong>
        </a>
    </li>
    <li>
        <a title="" href="#">
            <span></span>
            <strong></strong>
        </a>
    </li>
</ul>

CSS

body {
    background: #ccc; 
}

.postActions {
    
}

.postActions li {
    float: left;
    margin-left: 9px;
    position: relative;
    height: 28px;
    width: 28px;
    
}

.postActions li a {
    display: block;
    height: 100%;
    width: 100%;
    
}

.postActions li a strong {
    background: #ccc;
    position: absolute;
    top: 7px;
    left: 7px;
    display: block;
    height: 14px;
    width: 14px;
}

.postActions li a span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 28px;
    width: 28px;
    -webkit-border-radius: 20px;
    background: #484D61;
    -webkit-box-shadow: 0 1px 0 #fff;
    -webkit-transition: all 0.3s ease;
}

.postActions li a:hover span {
    -webkit-transform: scale(1.4);
}

.postActions li a:active span {
    -webkit-transform: scale(1.1);
}