Making clickable div

Question

I want to make clickable div. Currently, it is only working when I click the red rectangle. How can I make the entire div clickable?

HTML

<div class="button">
    <a href="#">
        <p class="instagram-button">
            <i class="fab fa-instagram"></i>
            <span>Instagram Page</span>
        </p>
    </a>
</div>

CSS

.button {
    background-color: transparent;
    cursor: pointer;
    border: 2px solid #737373;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
}

.button span {
    font-size: 14px;
    color: #737373;
    text-transform: uppercase;
}

.fab {
    color: #737373;
    padding-right: 5px;
}

Possible duplicate of [Make a div into a link](https://stackoverflow.com/questions/796087/make-a-div-into-a-link) — Mike, Jul 08 '18 at 08:25
I don't see any real justification for using a `p` element here. I'd remove it, and then format the `a` element as desired. You made the parent a `flex`container, so you probably want to specify how the child is supposed to behave in terms flexbox as well (grow, etc.) — CBroe, Jul 08 '18 at 08:26
I'm not sure I understand your question. Do you mean how to make the whole thing into a hyperlink? If yes, move the `a` tag such that it encloses everything — geco17, Jul 08 '18 at 08:27
First, Making a markup 'clickable' hurting accessibility semantics ( u need to add come tag values), Second, to implement a 'click' to a `div` element u need to add an event listener and pass if a function callback in JS. — Hulke, Jul 08 '18 at 08:58

score 0 · Accepted Answer · edited Jul 08 '18 at 11:38

0

Make your <a> tag display:block and 100% height & width so the <a> tag has the same size your <div> tag

edited Jul 08 '18 at 11:38

Lorddirt

460
3
14

answered Jul 08 '18 at 08:33

PierreD

860
1
14
30

1

He asked how to make the `div` clickable, not the content inside it. The answer u provided is an anti-pattern. – Hulke Jul 08 '18 at 08:58

score 0 · Answer 2 · answered Jul 08 '18 at 09:08

function redirect(){
window.location = "yourWebsite";
}

.button {
    background-color: transparent;
    cursor: pointer;
    border: 2px solid #737373;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
}

.button span {
    font-size: 14px;
    color: #737373;
    text-transform: uppercase;
}

.fab {
    color: #737373;
    padding-right: 5px;
}

<div onclick='redirect()' class="button">
    <a href="#">
        <p class="instagram-button">
            <i class="fab fa-instagram"></i>
            <span>Instagram Page</span>
        </p>
    </a>
</div>

Simple. Just redirect with the whole 'division' instead of just the 'anchor'.

(yes. it is supposed to throw a 404 error, I set window.location to 'yourWebsite' which is invalid.)

Suggestion: To make your anchor look more like a button, remove that underline from it with text-descoration: none.

score 0 · Answer 3 · answered Jul 08 '18 at 12:32

0

If you can use JQuery, do $(".button").click(function (){window.location.href="/wherever/you/wish/to/go"})

also, what's wrong with an onclick attribute?

answered Jul 08 '18 at 12:32

J-Cake

1,526
1
15
35

score 0 · Answer 4 · answered Jul 08 '18 at 12:56

0

Simply add an event listener to the button .div and assign a function to the event that redirects the window to a new location.

answered Jul 08 '18 at 12:56

Yamikani Sita

51
1
5

Making clickable div

4 Answers4