body{
    background-color: rgb(254, 189, 89);
}

.container{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
}

/*きらっと光る*/

.container a{
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
	display:inline-block;
    border: #fff 1px solid;
    border-radius: 20px;
    padding: 10px 20px;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.container a::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(254,189,89,0) 0%, rgba(254,189,89,.3) 100%);
	transform: skewX(-25deg);
}

.container a:hover{
    background-color: #fff;
    color: rgb(254, 189, 89);
    transition: 0.3s ;
}

/*hoverした際の移動のアニメーション*/
.container a:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}