button{
  background:#000000;
  color:#ffffff !important;
  border:none;
  position:relative;
  font-size:1.6em;
  padding:1% 15%;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#ffffff;
  color:#000000 !important;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #000000;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;

}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

button:visited{
  color:none;
}

@media only screen and (max-width: 1024px) {

#button  {
    text-align: center;
}
  
  
a {
    background-color: black;
    border: solid 1px white;
    border-radius: 4px;
    color: #000000;
    display: block;
    max-width: 100%;
    line-height: 44px;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: (0,0,0,0);
    cursor: pointer;
}
  
.hover {
    background-color: #ffffff;←hoverした際の色の設定
    border: solid 1px #000000;
}
}