User:Jdlrobson/scripts/backtotop.css

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
.backtotop {
  /* initially hide the element */
  visibility: hidden;
  opacity: 0;
  /* basic styling */
  position: fixed;
  width: 2.5em;
  height: 2.5em;
  border-radius: 100%;
  box-shadow: 0.1em 0.2em 0.3em #c8ccd1;
  bottom: 20px;
  right: 0;
  cursor: pointer;
  z-index: 3;
  background-color: #3366cc;
  /* define what happens, if the visible class is added/removed, add a nice fade out/in */
  -webkit-transition: opacity 0.5s 0s;
  -moz-transition: opacity 0.5s 0s;
  transition: opacity 0.5s 0s;
}
.backtotop.visible {
  opacity: 0.8;
}
.backtotop.visible:hover {
  opacity: 1;
}
.backtotop > .arrow-up {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}