Jump to content

How do I set button that directs to different page


cyber15

Recommended Posts

I'm trying to make a news portal that directs you to different page when you click on 'Read' button. When I link the 'Read' button, it applies to all the 'Read' button.

I want to know how to link it like this for example:

Storm news
Click 'Read' -> Link to this storm article

Flood news
Click 'Read' -> Link to this food article

Sorry for my poor english.

Link to comment
Share on other sites

Easiest way is to use a link <a>..</a> which takes you to the required page, passing the id of the article in the query string. Style the link to look like a button.

For example

<head>
<title>Example</title>
<style type='text/css'>
    body {
        font-family: verdana, sans-serif;
        font-size: 11pt;
    }
    .link-button {
        display: inline-block;
        width: 50px;
        padding: 5px;
        margin-left: 16px;
        background-color: blue;
        color: white;
        border: 1px solid black;
        text-align: center;
        text-decoration: none;
        border-radius: 8px;
    }
    .link-button:hover {
        background-color: gray;
    }
</style>
</head>
<body>
    <p>
        Storm news
        <br>
        <a href='read_article.php?id=1' class='link-button'>Read</a>
    </p>
    <p>
        Flood news
        <br>
        <a href='read_article.php?id=2' class='link-button'>Read</a>
    </p>
</body>

giving

image.png.0e901d173a3d60f7db99a4b8d5ec16be.png

Edited by Barand
Link to comment
Share on other sites

  • 5 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.