Removing Hyperlink from a button

HTML & CSS
1

I was trying to find a way to do this without using css.

One is a button, the other is just a regular link.

This doesn’t work:

<a href="https://www.google.com/"target="_blank" title="Show Profile"> <button style="background-color:#e95ebc;color:opaque;padding:22px 128px;cursor: pointer;text-decoration: none; ">Testing </button></a>

<script type="text/javascript">
$("a[title='Show Profile']").each(function(){
    $(this).replaceWith($(this).text());
});
</script>

But this does work. How come?

<a href="https://www.google.com/" 
style="text-decoration: none; "title="Show Profile">Testing</a>

<script type="text/javascript">
$("a[title='Show Profile']").each(function(){
    $(this).replaceWith($(this).text());
});
</script>
2

Buttons are not allowed as descendants of anchors (and vice versa).

Why would you ever need a button inside an anchor. Use one or the other. if you are using the button as a link (wrong) then you;d need js to make it to go to a destination.

The anchor is the element to use for links and you can style it to look like a button if you want.

3 Likes
3

You mean like this.

<a href="https://www.google.com/ "target="_blank" > <button style="background-color:#e95ebc;color:#e95ebc;padding:22px 128px;cursor: pointer;text-decoration: none; "></button></a>

4

I’m trying to remove the hyperlink in the middle.

I want to use a clickable button as a link without text.

5

No you can’t do that as I said in my other post. You can only use an anchor or a button. You can’t nest either.

What are you trying to do exactly?

Just style the anchor to look like a button.

<a href="https://www.google.com/ "target="_blank" style="background-color:#e95ebc;color:#e95ebc;padding:22px 128px;cursor: pointer;text-decoration: none;display:inline-block;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.5);border:1px solid #ccc"></a>

If you use external styles then you can add a hover or active state also to make it more button like.

6

As Paul has already pointed out

7

How come it works though?

8

I like the push down effect on the button.

9

It may work in some browsers but it doesn’t mean it works in all browsers. You should be validating your code anyway as has been mentioned before.

10

As I said above

11

Browsers forgive many mistakes made by coders. They could stop forgiving them any time, so it is best to follow the standards and not to rely on browser forgiveness. It is not guaranteed to last and it is not true across all browsers…

1 Like
12

Can you add a push down effect without using a button?

13

At the simplest you can do this but there is no limit to what you can customise.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.button {
	background-color:#e95ebc;
	color:#e95ebc;
	padding:22px 128px;
	cursor: pointer;
	text-decoration: none;
	display:inline-block;
	border-radius:5px;
	box-shadow:-2px -2px 5px rgba(0,0,0,0.5);
	border:1px solid #ccc;
	opacity:0.9;
}
.button:active{
	box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	opacity:1.0
}
</style>
</head>

<body>
<a class="button" href="https://www.google.com/ "target="_blank"></a>
</body>
</html>
14

What if I used something like this?

<FORM>
<INPUT TYPE="button" onClick="parent.location='page.html'">
</FORM>

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>
15

You asked for advice, why not use what has been suggested instead of coming up with something completely different? Besides, using a form and JavaScript for what you are trying to do is just plain daft.

16
17

25th May 2010 should alert you to the fact that @PaulOB’s advice is likely to be considerably more up-to-date. HTML and CSS have moved on significantly in the last seven years.

2 Likes
18

I already told you you could do it with js on the button

Here are three ways to do it but of course only one is semantically correct.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.button {
	background-color:#e95ebc;
	color:#e95ebc;
	padding:22px 128px;
	cursor: pointer;
	text-decoration: none;
	display:table;
	margin:10px;
	border-radius:5px;
	box-shadow:-2px -2px 5px rgba(0,0,0,0.5);
	border:1px solid #ccc;
	opacity:0.9;
}
.button:active {
	box-shadow:2px 2px 5px rgba(0,0,0,0.5);
	opacity:1.0
}
</style>
</head>

<body>
<a class="button" href="https://www.google.com/ "target="_blank"></a>

<button class="button" onclick="location.href='http://google.com';" ></button>

<form action="http://google.com">
  <input class="button" type="submit" value="Go to Google">
</form>
</body>
</html>
1 Like
19

Nu Html Checker is saying frameborder is obsolete.

<div id="myscroll2" style="display: none;">
<iframe style="display:block;" frameborder="0" name="frame2" width="266" height="174" ></iframe>
</div>

I changed it to this.

I added border: 0px; instead.

<div id="myscroll2" style="display: none;">
<iframe style="display:block; border: 0px;"  name="frame2" width="266" height="174" ></iframe>
</div>

Now Nu Html Checker is saying there are no more errors.

Is that fine what I did, or not?

20

It’s good that you are fixing validation errors. :+1:

Regarding: style="display:block; border: 0px;"
I think you know already the general consensus on in-line styling. That aside, display:block; is redundant, as block is the default display for an iframe. In border: 0px;, when you have a 0 value, don’t specify units. Zero is zero in all units.

1 Like