Skip to content

Instantly share code, notes, and snippets.

@DigiMancer3D

DigiMancer3D/Disappearing Button Ads

Created July 9, 2020 02:18
Show Gist options
  • Save DigiMancer3D/47987ea404c62256fd425fbc6e67919c to your computer and use it in GitHub Desktop.
Save DigiMancer3D/47987ea404c62256fd425fbc6e67919c to your computer and use it in GitHub Desktop.
Download ZIP
Create disappearing button ads on your page, this example is in a dark mode but the button removes off page after clicking to prevent mass clicking or accidental user clicks.
Raw
Disappearing Button Ads
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body{
background-color:black;
}
.divTableRow {
display: table-row;
}
.divTableCell {
display: table-cell;
}
#adbdy {
border-radius:49.5%;
background-color:black;
border-color: grey;
border-opacity:0.6;
border-width:2px;
align:left;
padding-right:-5px;
paddin-left:-5px;
margin-bottom:-2.62vw;
padding-bottom:-0.22vw;
width: auto;
overflow:auto;
margin-bottom:-1.0px;
}
#ad-inside-text {
font-size:110%;
margin:3px;
padding:3px;
}
/* #imgbox {
margin-top:13px;
margin-bottom:-13px;
padding-bottom:-13px;
pading-top:-18px;
padding-right:0.5px;
padding-left:2px;
top:6;bottom:0;
height:75%;
border-radius:9%;
luminosity:-5.9;
opacity:0.73;
}*/
.shimmer {
text-align: center;
color: #3a7c3b;
background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
-webkit-background-size: 225px 150%;
-moz-background-size: 225px 150%;
background-size: 225px 150%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-animation-name: shimmer;
-moz-animation-name: shimmer;
animation-name: shimmer;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-repeat: no-repeat;
background-position: 0 0;
background-color: #222;
}
@-moz-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-webkit-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@-o-keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
@keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
</style>
<body>
</br></br>
<div class="divTableRow">
<div class="divTableCell" style="width:43vw;">&nbsp&nbsp&nbsp&nbsp</div>
<div class="divTableCell" style="left:50; right:50;">
</br>
<button type="button" id="adbdy" onclick="window.open('https://hempworx.com/3Douglas', '_blank'); this.style.display='none'; document.getElementById('adtxt').style.display='none';"><b id="ad-inside-text"><sup><sub><sub style="font-size:123%;"><b class="shimmer">CBD&nbsp&nbspHEMPWORX</b></sub></sub></sup></b>
<!--<img src="https://spee.ch/7/hempworx-logo.png" align="center" id="imgbox" />-->
</button>
<span id="adtxt"><div class="divTableCell" style="width:33vw;">&nbsp&nbsp&nbsp&nbsp</div><div class="divTableCell" style="width:33vw;">&nbsp&nbsp&nbsp&nbsp</div><div class="divTableCell" style="width:33vw;"><b><sup><sup><sup>ad</sup></sup></sup></b></div></span>
&nbsp&nbsp&nbsp</div>
<div class="divTableCell" style="width:33vw;">&nbsp&nbsp&nbsp&nbsp</div>
</div>
</br></br>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment