2016-02-17 6 views
0

У меня есть кнопка (в стиле css). HTML lloks вот так:ссылку на адрес электронной почты?

<div class="button">Kontakt</div> 

Теперь я хочу, чтобы кнопка ссылалась на адрес электронной почты. Следующее решение не сработало. Он показывает адрес электронной почты ([email protected]) в виде текста в кнопке.

<div class="button"><a href="mailto:[email protected]">Kontakt</a></div> 

и раствор с сНу контейнера с внутренней HTML elemnt также не работает:

<a href="mailto:[email protected]"><div class="button">Kontakt</div></a> 

Любые идеи, как я могу показать слово «Контакт» как текст на кнопке, которая связывает с адрес электронной почты?

Я с нетерпением ожидаю услышать от вас.

+1

Нет необходимости в div. Измените свою кнопку CSS, чтобы также применить к элементам 'a', а затем сделать'

+0

'Kontakt ' это может помочь вам [http://stackoverflow.com/questions/18626755/linking-css-button-to-email-how-can -it-be-done] – SR1092

ответ

0

Просто напишите

<a class="button" href="mailto:[email protected]">Kontakt</a> 
+0

Спасибо за ваш ответ, , когда я делаю это, я больше не могу видеть кнопку. Когда я смотрю в hrome deveoper tool или firebug, я вижу новый класс [email protected] Но я не знаю, почему ... это должно быть своего рода защита от спама ?? – tom84

0

.btn { 
 
    background: #3498db; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 28; 
 
    -moz-border-radius: 28; 
 
    border-radius: 28px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
.btn:hover { 
 
    background: #3cb0fd; 
 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
}
<a class="btn" href="mailto:[email protected]">Get In Touch</a>

0

Просто напишите это в вас HTML файл

<a href="mailto:[email protected]">Kontakt</a> 

и для CSS добавьте следующие

a { 
    text-decoration: none; /* to hide the underline */ 
} 
a:visited { 
    /* this will style the button after clicking for example the color of the text */ 
    color: white; /* change it to the text color in your normal style */ 
} 
a:hover { 
    /* the style here will appear when the mouse is over the button */ 
    /* this will help you to make it act like a real button */ 
} 

или добавить onclick к кнопке тегу и внутри него добавить JavaScript, к примеру:

<button onclick="window.open('mailto:[email protected]');">Kontakt</button> 
0

Используйте <a> тега.

<a href="mailto:[email protected]" class="mail-button">Kontakt</a> 

и добавить CSS, чтобы сделать <a> тег кнопки, как.