0

I have a look alike button on my form using <a> like this:

<a target='_blank' href="mailto:email@me.com" style='font-size:15px;padding:8px 12px;text-decoration:none;'>SEND</a>

When hovering on the button you see the email (href). Is there a way to hide that and when hovering show nothing?

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Kukula Mula
  • 1,788
  • 4
  • 19
  • 38
  • https://stackoverflow.com/a/15651792/4229270 – Sinto Nov 01 '17 at 06:06
  • Possible duplicate of [Is it possible to hide the title from a link with CSS?](https://stackoverflow.com/questions/15364063/is-it-possible-to-hide-the-title-from-a-link-with-css) – Sinto Nov 01 '17 at 06:10

4 Answers4

3

Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.

Yogesh H Shenoy
  • 580
  • 2
  • 4
  • 21
0

Browsers display the href link you specified (which is OK naturally). But since you don't want it displayed, you should NOT specify the href property in HTML, put it in JavaScript instead - using window.location = href

<a target='_blank' href="#" onclick="window.location = 'mailto:email@me.com'" style='font-size:15px;padding:8px 12px;text-decoration:none;'>SEND</a>
Yogesh H Shenoy
  • 580
  • 2
  • 4
  • 21
Yemi Tula
  • 29
  • 6
0

As Yogesh said:

HTML:

<a href='#' id='mailme'>SEND</a>

CSS:

#mailme {font-size:15px; padding:8px 12px;}

JS:

$('#mailme').click(function() {
    window.open('mailto:email@me.com');
});
Yogesh H Shenoy
  • 580
  • 2
  • 4
  • 21
kapitan
  • 2,008
  • 3
  • 20
  • 26
0

a {
  font-size: 15px;
  padding: 8px 12px;
  text-decoration: none;
}
<a href="#" onclick="window.open('mailto:email@me.com')">SEND</a>
Shreevardhan
  • 12,233
  • 3
  • 36
  • 50