Popup tiroir latéral

Un peu de script placé avant la balise </body>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script> $('.button').on('click', function(e) { $('.popup').toggleClass("open"); $('.button').toggleClass("button-opened"); e.preventDefault(); }); </script>

CSS

.popup{ left: -275px; position: fixed; top: 25%; transition: left .5s ease; }
.popup-content{ background-color: #72ae00; box-shadow: 2px 2px 2px black; border-bottom-right-radius: 10px; border-top-right-radius: 10px; box-sizing: border-box; color: white; float: left; height: 220px; padding: 1em; width: 275px; }
.open{ left: 0px; }
.button{ background-color: red; border-bottom-right-radius: 10px; border-top-right-radius: 10px; box-shadow: 5px 2px 5px black; float: right; position:relative; top:50px; height: 50px; padding-top: 1.5em; width: 25px; }
.button::after{ content:"♥"; color: white; cursor: pointer; font-size: 1.2em; padding: 5px; }
.button-opened::after{ content:"◀"; color: white; cursor: pointer; font-size: 1.2em; }

HTML

<div class="popup">
<div class="popup-content">
<h3>placer du texte ici</h3>
<p>placer du texte ici</p>
</div>
<a class="button"></a>
</div>