Replicating linkedIn like button design and it's click animation

Replicating linkedIn like button design and it's click animation

2 min. read

HTML markup

<div id="outer-cover">
    <div id="layer">
        <div id="inner-cover">
            <input type="checkbox" id="toggler">
            <div id="hand">
                <img src="https://www.webslake.com/assets/img/content/article/cnt/_22-1.png" id="img-1">
                <img src="https://www.webslake.com/assets/img/content/article/cnt/_22-2.png" id="img-2">
                <img src="https://www.webslake.com/assets/img/content/article/cnt/_22-3.png" id="img-3">
            </div>
            <div id="text">Like</div>
        </div>
    </div>
</div>

CSS rules

*
{
    outline: none;
}

body
{
    margin: 0px;
    background-color: #fff;
}

img
{
    display: block;
}

#outer-cover
{
    width: 188px;
    margin: 50px auto;
}

#layer
{
    color: #666;
    height: 84px;
    position: relative;
    transition-duration: 167ms;
    transition-property: background-color,box-shadow,color;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    border-radius: 6px;
    overflow: hidden;
    z-index: 0;
}

#layer:after
{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    padding: calc(50% + 14px);
    border:10px solid rgba(152,216,244,.25);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition-property: padding,border-width;
    transition-duration: 334ms;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    border-radius: 50%;
    z-index: -1;
}

#layer:active:after
{
   padding: 0px;
   border-width: 50vw;
   transition-duration: 140ms;
}

#layer:hover
{
    color: #006097;
    background-color: rgba(152,216,244,.25);
}

#inner-cover
{
    padding: 20px;
}

#inner-cover:after
{
    content: '.';
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

#img-2,#img-3
{
    display: none;
}

#layer:hover #img-1, #layer:hover #img-3
{
    display: none;
}

#layer:hover #img-2
{
    display: block;
}

#toggler
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    border-width: 0px;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

#hand
{
    float: left;
}

#text
{
    float: right;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Lucida Grande,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Emoji,Segoe UI Symbol,Hiragino Kaku Gothic Pro,Meiryo,Hiragino Sans GB W3,Noto Naskh Arabic,Droid Arabic Naskh,Geeza Pro,Simplified Arabic,Noto Sans Thai,Thonburi,Dokchampa,Droid Sans Thai,Droid Sans Fallback,'.SFNSDisplay-Regular',Heiti SC,Microsoft Yahei;
    font-weight: 600;
    font-size: 40px;
    line-height: 40px;
    margin-top: 1px;
}

#toggler:checked + #hand img
{
    display: none;
}

#toggler:checked + #hand #img-3
{
    display: block;
}

#toggler:checked ~ #text
{
    color: #006097;
}

See result in the fiddle below

Write comments