Kopiowanie e-maila po kliknięciu na "przycisk".

Question

Cześć, dopiero co zacząłem moją przygodę z tworzeniem stron i po drodze napotkał mnie pewien problem. 
Mój problem polega na tym, że stworzyłem diva i wystylizowałem go na przycisk (z buttona korzystać nie chcę ponieważ zepsuje mi to wygląd strony) teraz chciałbym aby po kliknięciu na ten "przycisk" do schowka kopiował się podany przeze mnie e-mail. Jak takie coś zrobić, czego użyć?

<div class="button">Kopiuj e-mail</div>

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 20px;
    color: #FFFFFF;
    padding: 20px;
    width: 150px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0;
    border-radius: 25px;
    height: 20px;
}

.button:hover {
    background-color: #198bff;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

 

Comments

Oczywiście, jeśli z buttonem będzie 100 razy łatwiej jestem skłonny go użyć.

---

W jaki sposób zepsuje Ci to wygląd? Nadaj mu style z klasy ".button" i będziesz miał dokładnie taki sam element (usuń tylko to sztywne height ze stylów). Button nadaje się do tego o wiele lepiej. Różni się na przykład tym, że ma style, które odpalą się w momencie "focus", o których na przykład tutaj nie pomyślałeś :)

---

Zrobiłem jak pisałeś, rzeczywiście wszystko wygląda tak samo ale jak teraz z buttonem zrobić to o czym pisałem wyżej?

---

Kopiowanie e-mail to już musisz odsłużyć po stronie JS

---

Pewnie jakoś poprzez javascript, szukaj pod hasłem "copy to clipboard js". Nigdy nie korzystałem z takiej opcji. Trochę przekombinowana. Musisz poinformować użytkownika, że klikając button skopiuje się mail i kiedy już kliknie jakoś poinformować o sukcesie operacji... co jeśli js nie zadziała? Warto się zabezpieczyć i gdzieś tego maila jeszcze pokazać na wypadek, jeśli użytkownik będzie wolał sobie go skopiować ręcznie, lub przepisać. Problematyczne :P wolę prostsze rozwiązania.

---

Ja zrobiłem to tak, że mail jest pokazany na głównej a pod nim jest ten button skopiuj e-mail. Pozostaje mi jedynie poszperać trochę w internecie, dzięki za pomoc.

 

edit. udał mi się za pomocą tego https://codepen.io/shaikmaqsood/pen/XmydxJ