Button inside link?

HTML & CSS
1

I need to do something like this:

<a href=“#”>
<div></div>
<div></div>
<button></button>
</a>

And I need to be able to click the button without being taken to wherever the <a> is heading. Is this possible?

2

‘Need’ is usually the wrong word—just like when you tell the doctor what you need. That’s not a good code structure, so you don’t need it. Perhaps explain what is really needed here, and we can suggest what to do. :slight_smile:

3

Well I have a box, a product box for a e-commerce website, and they want the whole box to work as a link, but they also want to have a “put in basket” button inside this box, and I don’t know how to solve this, maybe I could wrap all other elements thats inside the box in <a> except for the basket, what do you think?

4

Yes, when I hear that, I always picture small kids with their bottom lip sticking out. :lol: Usually, what kids want and what they need are quite different things. Same with clients.

Anyhow, notwithstanding that you should slap them in the face and declare this a silly idea, but you could perhaps get the desired result in a few ways. One would be with CSS, in that you put the button outside the linked content but then position it over the link. Pretty ugly solution, though, IMHO.

Or perhaps you can tweak the UI responses with JS, but that again is a messy business and not my domain.

5

Hmm, so the best thing would be to just have a talk with them and let them know it would be better to take another approach.

6

Hi,

Assuming I’ve understood correctly you can do it like this.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box {
	position:relative;
	width:220px
}
.box a {
	display:block;
	border-radius:5px;
	background:#f00;
	color:#fff;
	padding:10px 10px 50px;
	text-align:center;
}
.box button {
	position:absolute;
	bottom:5px;
	right:0;
	left:0;
	margin:auto;
	text-align:center;
	width:100px;
	color:#fff;
	border-radius:4px;
	background:blue;
	color:#fff;
	padding:5px;
	border:none;
}
.box a:hover { background:#900 }
.box button:hover {
	background:#000;
	cursor:pointer
}
</style>
</head>

<body>
<div class="box"> <a href="http://www.google.com">Normal content goes here</a>
		<button>Click to add</button>
</div>
</body>
</html>

My clients are always asking for things like that where the whole box is clickable but some inner elements lead to somewhere else. You just have to absolutely position the ‘extra’ links on top of the other content.

The button can be a button or a link depending on how you are handling it.

7

Thanks, will have a look at it.

8

Just for fun, here’s another contribution to the cause…

(Thanks for the head start, @Paul_O_B!)

I changed some units of measure so it will accept a respectable range of zooming before it “breaks”.
The outer box remains hightlighted when the button box is entered.
The links are independent.


<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Button within Clickable Box 2</title>
    <style>
.box,
.button {
    margin:0 auto;
}
.box {
    outline:1px solid magenta;
    position:relative;
    width:260px;
}
.box > a {
    display:block;
    background:#009;
    border-radius:5px;
    color:#fff;
    text-align:center;
    padding:.3em 10px 2.5em;
}
.box:hover > a {background:#00f;}
.box:hover > a:active {color:#f0f;}

.button a {
    position:absolute;
    bottom:.5em;
    right:0;
    left:0;
    width:7em;
    background:#900;
    color:#fff;
    text-align:center;
    border:none;
    border-radius:4px;
    padding:.25em 0px;
    margin:auto;
}
.button:hover a {
    display:block;
    background:#f00;
    cursor:pointer;
    font-weight:bold;
}
    </style>
</head>
<body>

<div class="box">
    <a href="http://www.google.com">Normal content goes here
        <div class="button">
            <a href="">Click to add</a>
        </div>
    </a>
</div>

</body>
</html>

(I’m having PC problems, so I have not tested it in various devices or browsers.)

9

Hi Ron,

Unfortunately you can’t have nested anchors as that is not valid (or much sense lol):). I think you meant the html to be this: :wink:


<div class="box"> <a href="http://www.google.com">Normal content goes here </a>
     <div class="button"> <a href="">Click to add</a> </div>
</div>
10

Yes, of course :blush: Thanks, Paul. I moved the </a> as an experiment to see how it would fail and it didn’t. I became sidetracked and forgot to go back and set it right. I need to get more sleep. :-/

Cheers, and thanks again. :slight_smile: