fab button

con css

by femfoyou

HTML

<div class="container">

<div class="fab fab-br">
  <div class="icono">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" /></svg>
  </div>
</div>

<div class="fab fab-bl">
  <div class="icono">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" /></svg>
  </div>
</div>

<div class="fab fab-tr">
  <div class="icono">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" /></svg>
  </div>
</div>

<a href="#" class="fab fab-tl" onClick="copyToClipboard('texto')" id="miboton">
  <div class="icono">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" /></svg>
  </div>
</a>

<p id="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores eveniet, et, rerum optio libero cum voluptatum error iusto quae quas, quisquam eligendi culpa voluptatibus repellendus reprehenderit facilis, sequi ratione pariatur.</p>

<textarea name="" id="" cols="30" rows="10"></textarea>

</div>

CSS

.container {
  width: 100%;
  height: 1024px;
}

.fab {
  height: 56px;
  width: 56px;
  background-color: #E40A5D;
  display: inline-block;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
  outline: 0;
  padding: 0;
  position: relative;
  -webkit-user-drag: none;
  font-weight: 700;
  color: #f1f1f1;
}
.icono {
  position: absolute;
  top: 28%;
  left: 28%;
}
.fab-br { position:fixed;margin: 25px; bottom: 0;right: 0;}
.fab-bl { position:fixed;margin: 25px; bottom: 0;left: 0;}
.fab-tr { position:fixed;margin: 25px; top: 0;right: 0;}
.fab-tl { position:fixed;margin: 25px; top: 0;left: 0;}

.desaparecer {
  opacity: 0;
}

JavaScript

function copyToClipboard(elementId) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

$(window).scroll(function() {
		//	if ($(this).scrollTop() > 50) $('#miboton').addClass('.desaparecer').fadeIn();
		//	else $('#miboton').removeClass('.desaparecer');
      if ($(this).scrollTop()) $( "#miboton" ).css( "opacity", "0" ).fadeIn();
      else $('#miboton').css( "opacity", "1" ).fadeIn();
});