.garis-footer{
    width:280px;
    height:1px;
    background:darkgrey;
    display:block;
    margin:0 auto;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.btn-garis-footer {
width: 242px;
  height: 100px;
  border: 1px solid #333;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  transition: 1s;
}

.a-footer{
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
    color: #212529;
    outline:none!important;
}

.btn-garis-footer::before, .btn-garis-footer::after {
      align-items: center;
  justify-content: center;
  position: absolute;
  background: #f3f3f3;
  z-index: -1;
  transition: 1s;
  content: '';
}

.btn-garis-footer::before {
      align-items: center;
  justify-content: center;
 height: 100px;
  width: 150px;
}

.btn-garis-footer::after {
      align-items: center;
  justify-content: center;
width: 242px;
  height: 60px;
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.btn-garis-footer:hover::before {
    align-items: center;
  justify-content: center;
  width: 0px;
  background: transparent;
}

.btn-garis-footer:hover::after {
    align-items: center;
  justify-content: center;
  height: 0px;
  background: transparent;
}

.btn-garis-footer:hover {
    align-items: center;
  justify-content: center;
  background: transparent;
}