CSS code used for floating action button on /s/MeanwhileOnReddit (currently defunct)

523

•

In response to comment. Used in /s/MeanwhileOnReddit.

/* Floating buttons from [/s/MeanwhileOnReddit](/s/MeanwhileOnReddit) */
#bttb:hover  { background-color: #4163acFF;
border-radius:8px;
color: #fff;}/*#bttb{ display:inline-block;
float:left;left:10px;bottom:20px;right:0px;}*/
#chpop { right:5em; }
#bttb { bottom: 0em;font-size:24px;right:25px;}

.sidebar a[href*="#Ha7btn"]:link,
a[href*="#Ha7btn"]:visited
{color:white!important;}
/* Sorry for unoriginal ID name, I will change it at some point. */

.sidebar [href*="#Ha7btn"]
{line-height:1.3em;z-index:9;font-family:roboto,arial,'trebuchet ms','segoe ui',helvetica,verdana;

-webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
user-select: none;
 -webkit-tap-highlight-color: transparent;
}

.sidebar a[href*="#Ha7btn"] {
  position: fixed;
  float: right;
  width: 3em;
  font-size: 30px;
  background-color: #500;
  border-radius: 8px;
  color: #fff6;
  border: none;
  margin: 0 auto;
  padding: .3em;
  text-align:center;
  vertical-align:middle;
  opacity:.3;
  transition-duration:1s;
  bottom: 30px;
}
[@media](/u/media) (max-height:400px)
 and (max-width:500px){
 a[href*="#Ha7btn"]{display:none}
}
.sidebar a[href*="#Ha7btn"]:hover {
  opacity:1;
  transition-duration:.3s;
}

/* Positions of buttons */
/* #bttb { float:left:10px;bottom:30px;}*/
.sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1) {
right: 20px; width:2em;height:2em;
border-radius: 9999px;display:inline-block;
background-color:#f40;box-shadow:1px 1px 2px black; 
opacity:.6;
}
.sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):hover { box-shadow:0 0 5px white;opacity:1; }
.sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):active {
background-color:#A30;
transform:scale(.8); }

[@media](/u/media) (min-width:600px){
.sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1) {
  width:4em;
  text-align: left;
  white-space: nowrap;
  }
.sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):after {
  content:"Submit post";
  overflow-wrap:break-word;
  white-space: normal;
  width:5em;
  font-size:16px;
  display:inline-block;
  height:1px!important;
  line-height: 1em;
  margin-left:1em;
  position:relative;left:-1em;top:3px;
  text-align: center;
  overflow-x:hide;
}

In response to [comment](https://poal.co/s/Poaldev/281952/cc3bfc57-865c-4b59-b464-0c21046ddc2b#cmnts). Used in /s/MeanwhileOnReddit. ~~~ /* Floating buttons from /s/MeanwhileOnReddit */ #bttb:hover { background-color: #4163acFF; border-radius:8px; color: #fff;}/*#bttb{ display:inline-block; float:left;left:10px;bottom:20px;right:0px;}*/ #chpop { right:5em; } #bttb { bottom: 0em;font-size:24px;right:25px;} .sidebar a[href*="#Ha7btn"]:link, a[href*="#Ha7btn"]:visited {color:white!important;} /* Sorry for unoriginal ID name, I will change it at some point. */ .sidebar [href*="#Ha7btn"] {line-height:1.3em;z-index:9;font-family:roboto,arial,'trebuchet ms','segoe ui',helvetica,verdana; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .sidebar a[href*="#Ha7btn"] { position: fixed; float: right; width: 3em; font-size: 30px; background-color: #500; border-radius: 8px; color: #fff6; border: none; margin: 0 auto; padding: .3em; text-align:center; vertical-align:middle; opacity:.3; transition-duration:1s; bottom: 30px; } @media (max-height:400px) and (max-width:500px){ a[href*="#Ha7btn"]{display:none} } .sidebar a[href*="#Ha7btn"]:hover { opacity:1; transition-duration:.3s; } /* Positions of buttons */ /* #bttb { float:left:10px;bottom:30px;}*/ .sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1) { right: 20px; width:2em;height:2em; border-radius: 9999px;display:inline-block; background-color:#f40;box-shadow:1px 1px 2px black; opacity:.6; } .sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):hover { box-shadow:0 0 5px white;opacity:1; } .sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):active { background-color:#A30; transform:scale(.8); } @media (min-width:600px){ .sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1) { width:4em; text-align: left; white-space: nowrap; } .sidebar a[href$="#Ha7btn-submit1"]:nth-of-type(1):after { content:"Submit post"; overflow-wrap:break-word; white-space: normal; width:5em; font-size:16px; display:inline-block; height:1px!important; line-height: 1em; margin-left:1em; position:relative;left:-1em;top:3px; text-align: center; overflow-x:hide; } ~~~

(post is archived)