title: Scroll Down Arrow CSS
body: <p>I would really appreciate a little help with the CSS below. I have this implemented on www.thehomebird.com The problem I'm experiencing is that if I change the size of the browser window (horizontally) the arrow moves with that size which means if i use different browsers it's always in the wrong place. In perfect world I would love to have it act as if I change the size of the browser it always stays at the same place. </p>
  
  <p>When clicked it goes down as it does now and disspaears. When you scroll up it shows up again. I tried to find some websites where I saw it act as it should like but cant find aything at the moment Ill add it here when see it again, meanwhile hopefully someone knows what Im trying to do and could help me. Thank you in advance!</p>
  
  <pre><code>`/* Middle screen Arrow */
  
  
  .scroll_down_button {
      color: rgb(255, 255, 255);
      display: inline-block;
      font: 400 20px/1 "Josefin Sans",sans-serif;
      margin: 0 auto;
      left: 50%;
      letter-spacing: 0.1em;
      opacity: 1;
      position: absolute;
      vertical-align:middle;
      text-decoration: none;
      top: 75%;
      transform: translate(0px, -50%);
      transition: opacity 1s ease 0s;
      z-index: 999;
      outline: none !important;
  }
  
  .click_able_arrow {
       animation: 3s ease 0s normal none infinite running sdb04;
       border-bottom: 2px solid rgb(255, 255, 255);
       border-left: 2px solid rgb(255, 255, 255);
       box-sizing: border-box;
       height: 24px;
       left: 50%;
       margin-left: -12px;
       position: absolute;
       vertical-align:middle;
       top: 75%;
       transform: rotate(-45deg);
       width: 24px;
  }
  
  
   @-webkit-keyframes sdb04 {
   0% {
       -webkit-transform: rotate(-45deg) translate(0, 0);
   }
   20% {
       -webkit-transform: rotate(-45deg) translate(-10px, 10px);
   }
   40% {
       -webkit-transform: rotate(-45deg) translate(0, 0);
   }
  }
  
  @keyframes sdb04 {
  0% {
      transform: rotate(-45deg) translate(0, 0);
  }
  20% {
      transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
      transform: rotate(-45deg) translate(0, 0);
  }
  }
  </code></pre>