/* ------------------------------------
ボタンの基本スタイル
------------------------------------*/

/* ボタン自体のスタイル */

.shine-button {
	overflow:hidden;		/* ボタンの外の領域は非表示 */
}

/* ボタン内のリンクのスタイル 
（リンク自体でボタンを作る場合には不要） */

.shine-button a {
	display: block;	/* 形状はblock */
	width: 100%;		/* 外側のボックスに対して横幅いっぱいに*/
	padding: 1em;		/* 上下左右1文字分の余白 */
	color: white;			/* 文字色は白 */
	text-decoration:none;	/* 下線など文字装飾は無し */
}


/* ------------------------------------
ボタンの外側にボックス作成
（疑似要素「before」を使う）
------------------------------------*/
.shine-button::before {
	content: "";			/* 文字は表示しないので中身無しを指定 */
	position: absolute;	/* ボタンの位置を基準に絶対値指定する */
	display: block;		/* 形式はblock */
	background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.5));
	/* 背景色は透明から白になるグラデーション */
	width: 50px;	/* 横幅 */
	height: 50px;	/* 縦幅 */
	top: -60px;	/* ボタン左上を基準に上へ60pxの位置 */
	left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */

	/* アニメーションの動作指定 */
	animation-name:shine-run;	/* アニメーション名の指定 */
	animation-delay:0s;		/* 開始時間指定 */
	animation-duration: 9s;	/* 動作時間の指定 */
	animation-timing-function: ease-in;/* 動き指定（徐々に早く）*/
	animation-iteration-count: infinite;/* 無限繰り返しの指定 */
}

/* ------------------------------------
アニメーションのタイミングとボックスの
拡大率、角度、透過率の指定
------------------------------------*/
@keyframes shine-run {
    0% {
        transform: scale(0) rotate(50deg);
        /* アニメ開始時は大きさ0、50度の傾き */
        
        opacity: 0;
        /* アニメ開始時は全透過 */
    }

    40% {
        transform: scale(1) rotate(50deg);
        /* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
        
        opacity: 1;
        /* 透過しない（しっかり表示される）ように1を設定 */
    }

    100% {
        transform: scale(250) rotate(50deg);
        /* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/

        opacity: 0;
        /* 全透過になるようにして、徐々に消えるような変化を付ける */
    }
}