How to add event on like button

JavaScript
1

Hello there i want like button as like as it is describe after the comment section in the current website so please help me for that here’s that code for that i want to implement it inside of the card layout so please help me i’m in trouble

  <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>

<h1>A(nother) Card Layout via Flex Box</h1>
<ul class="cards">
    <li>
        <h2>Card With Image</h2>
        <p>Extra large</p>
        <img src="http://lorempixel.com/200/200/sports" 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>
        <h2>Card With Image</h2>
        <p>Extra large</p>
        <img src="http://lorempixel.com/200/200/business" alt="image" width="200" height="200">
        <ul class="buttons">
            <li>
                <img src="http://placehold.it/50x50" alt="Like Button" width="50" height="50">
            </li>
            <li>
                <img src="http://placehold.it/50x50" alt="Menu Button" width="50" height="50">
            </li>
            <li>
                <img src="http://placehold.it/50x50" alt="Link Button" width="50" height="50">
            </li>
        </ul>
    </li>
    <li>
        <h2>Card With Image</h2>
        <p>Extra large</p>
        <img src="http://lorempixel.com/200/200/people" alt="image" width="200" height="200">
        <ul class="buttons">
            <li>
                <img src="http://placehold.it/50x50" alt="Like Button" width="50" height="50">
            </li>
            <li>
                <img src="http://placehold.it/50x50" alt="Menu Button" width="50" height="50">
            </li>
            <li>
                <img src="http://placehold.it/50x50" alt="Link Button" width="50" height="50">
            </li>
        </ul>
    </li>
</ul>

</body>
</html>
2

Are you looking for css for rectangular buttons with rounded corners to replace your gray square buttons? Will these help you: http://www.w3schools.com/css/css3_buttons.asp

One of the problems with your styling is that you are applying the buttons class to ul, which won’t work. You need to apply it to an element that can be styled as a button, such as < button>, < div>, or < input>.

3

The member has a separate topic in HTML & CSS dealing with the styling issues. To avoid confusion, please keep the discussion here to the functionality of the buttons, as per the title.

1 Like
4

Thanks for clarifying. I thought it was about the buttons, but the grammar is difficult to tell: " i want like button as like as it is describe after the comment section."

At any rate, I don’t think you can apply a button styling class to < ul> as he did. Hope that information helps him.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.