Floating Ribbon
Code Snippet:
<div class="overlay-ribbon">
<div class="ribbon-content">
<span id="close" class="close-x"><a href="#">x</a></span>
<a href="https://thelaundrymoms.com" target="_blank"> <div class="img-container"><img src="https://thelaundrymoms.com/wp-content/themes/thelaundrymoms2012/images/logo.png" width="171" height="135" alt="" /></div>
<h3>The Laundry Moms</h3>
<p>Sorting Out Life...<br>One Load at a Time!</p></a>
</div>
</div>
<style>@import url(https://fonts.googleapis.com/css?family=Satisfy);html,body{width:100%;height:100%}.overlay-ribbon a{text-decoration:none;color:#fff;text-align:center}.overlay-ribbon{position:absolute;width:13em;height:14em;z-index:9999;top:0;right:2%;background:#9D0C13;padding:5px 0;background-image:-ms-radial-gradient(center top,circle farthest-side,#9D0C13 0%,#9D0C13 100%);background-image:-moz-radial-gradient(center top,circle farthest-side,#9D0C13 0%,#9D0C13 100%);background-image:-o-radial-gradient(center top,circle farthest-side,#9D0C13 0%,#9D0C13 100%);background-image:-webkit-gradient(radial,center top,0,center top,487,color-stop(0,#9D0C13),color-stop(1,#9D0C13));background-image:-webkit-radial-gradient(center top,circle farthest-side,#9D0C13 0%,#9D0C13 100%);background-image:radial-gradient(circle farthest-side at center top,#9D0C13 0%,#9D0C13 100%);-webkit-box-shadow:-5px 21px 28px -4px rgba(0,0,0,.43);-moz-box-shadow:-5px 21px 28px -4px rgba(0,0,0,.43);box-shadow:-5px 21px 28px -4px rgba(0,0,0,.43);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;animation:slidein 3s ease-in-out forwards}.ribbon-content{z-index:99999;position:relative;margin:0 5px}.ribbon-content h3{margin:0;padding:5px 0 5px 0;line-height:16px;font-family:'Satisfy',sans-serif;color:#fff;text-align:center}.ribbon-content>p,.ribbon-content>p span{color:#fff;margin:0;font-family: Helvetica, Arial, sans-serif;padding:0}.ribbon-content p span{display:block}.close-x{position:absolute;top:5px;right:5px;z-index:99; font-family: Helvetica, Arial, sans-serif;}.close-x a:link,.close-x a:visited{background:#9D0C13;color:#fff;padding:0 4px;font-weight:400;text-decoration:none}.close-x a:hover{background:#ff9f1c}.ribbon-content p {font-family: Helvetica, Arial, sans-serif;}.overlay-ribbon:before{content:"";position:absolute;bottom:-9em;left:0;width:0;height:0;border-top:10em solid #9D0C13;border-right:10em solid transparent;z-index:997}.overlay-ribbon:after{content:"";position:absolute;bottom:-9em;right:0;width:0;height:0;border-top:10em solid #9D0C13;border-left:10em solid transparent;z-index:998}.slideout{animation:slideout 1s ease-in-out forwards}@-webkit-keyframes slidein{from{transform:translate(0,-400px)}to{transform:translate(0,100px)}}@-o-keyframes slidein{from{transform:translate(0,-400px)}to{transform:translate(0,60px)}}@-moz-keyframes slidein{from{transform:translate(0,-400px)}to{transform:translate(0,60px)}}@keyframes slidein{from{transform:translate(0,-400px)}to{transform:translate(0,60px)}}@-webkit-keyframes slideout{from{transform:translate(0,60px)}to{transform:translate(0,-400px)}}@-o-keyframes slideout{from{transform:translate(0,60px)}to{transform:translate(0,-400px)}}@-moz-keyframes slideout{from{transform:translate(0,60px)}to{transform:translate(0,-400px)}}@keyframes slideout{from{transform:translate(0,60px)}to{transform:translate(0,-400px)}}</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(function(){$("#close").click(function(){$(".overlay-ribbon").addClass("slideout")})}); </script>
Button with Logo
Code Snippet:
<a href="https://thelaundrymoms.com" class="classname"><img src="https://thelaundrymoms.com/wp-content/uploads/2019/02/btn-logo.png" alt="The Laundry Moms" target="_blank"><br><span><em>Sorting Out Life...One Load at a Time!</em></span></a>
<style type="text/css">
.classname span{font-size:12px;color:#ffb7b7}.classname{-moz-box-shadow:0 1px 0 0 #f29c93;-webkit-box-shadow:0 1px 0 0 #f29c93;box-shadow:0 1px 0 0 #f29c93;background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#fe1a00),color-stop(1,#ce0100));background:-moz-linear-gradient(center top,#fe1a00 5%,#ce0100 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00',endColorstr='#ce0100');background-color:#fe1a00;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;text-indent:0;border:1px solid #d83526;display:inline-block;color:#fff;font-family:Arial;font-size:18px;font-weight:700;font-style:normal;height:60px;line-height:18px;padding-top:12px;width:260px;text-decoration:none;text-align:center}.classname:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#ce0100),color-stop(1,#fe1a00));background:-moz-linear-gradient(center top,#ce0100 5%,#fe1a00 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100',endColorstr='#fe1a00');background-color:#ce0100}.classname:active{position:relative;top:1px}</style>
Wooden Logo Button
Code Snippet:
<a href="https://thelaundrymoms.com" class="classname"><img src="https://thelaundrymoms.com/wp-content/uploads/2019/02/wooden-logo-btn.png" alt="The Laundry Moms" target="_blank"></a>