CSS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-1-39.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btnchangeradius">7-1-39 角丸に変わる</a>

CSSの書き方

/*角丸に変わる*/
.btnchangeradius{
	/*ボタンの形状*/
	display:inline-block;
	background: #333;
	color: #fff;
	padding: 10px 20px;
	border: 5px double white;
	text-decoration: none;
	outline: none;

	/*アニメーションの指定*/   
	transition:.3s ease-out;
}


/*hoverした際の角丸のアニメーション*/
.btnchangeradius:hover{
	background:#666;
	border-radius:20px;	
}