Like button same as instagram

HTML & CSS
1

Hello there how can i insert like button same as instagram in my website inside of card layout structure here’s the code for the following card layout structure

<style type="text/css">
body {
    background: #aaa;
}

.cards {
    background: #ddd;
    list-style: none;
    margin: 1em auto;
    padding: 0;
    max-width: 76em;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}

.cards > li {
    display: inline-block;
    background: #fff;
    border: 1px #aaa solid;
    border-radius: 4px;
    box-shadow: 2px 2px 2px #bbb;
    margin: 0.6em;
    padding: 0.6em;
    flex: 1 1 16em;
}

.cards > li > img {
    float: left;
    margin: 0.5em;
    max-width: 60%;
    height: auto;
    border: 1px #666 solid;
    border-radius: 2px;
    box-shadow: 2px 2px 2px #aaa;
}

.buttons {
    list-style: none;
    text-align: center;
    padding: 0;
}

.buttons img {
    margin-bottom: 1em;
}
    </style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8&appId=404110949921209";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=404110949921209" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
<h1>A(nother) Card Layout via Flex Box</h1>
<ul class="cards">
    <li>
        <h2>Card With Image</h2>
        <p>Extra large</p>
        <img src="12.jpg" alt="image" width="200" height="200">
        <ul class="buttons">
            <li>
                <img src="" alt="Like Button" width="50" height="50">
            </li>
            <li>
                <img src="" alt="Menu Button" width="50" height="50">
            </li>
            <li>
                <img src="" alt="Link Button" width="50" height="50">
            </li>
        </ul>
    </li>
    <li>
     </body>
<html>
2

3 posts were merged into an existing topic: Creating a Card Layout