CSSを使うと簡単にアニメーションを伴う処理が記述できます。
リンクによく利用されるマウスが乗った時にボタンが少し動くような処理を紹介します。

例としてdivタグをボタンに見立ててマウスが乗った時、影が少し濃くなってちょっとだけ上に動くようにしてみます。

HTML部分（クラス名としてbuttonを指定）

<div class="button">
	<p>ひたちなか情報電子専門学院</p>
</div>

CSS部分（クラスbuttonとbutton:hover要素にそれぞれ指定）

.button{
	font-size: 24pt;
	font-weight: 900;
	background-color: orange;
	color: white;
	text-align: center;
	box-shadow: 5px 5px 10px #ddd;	/* ボタンの影 */
	padding: 10px;
	transition: all 0.3s ease 0s;	/* 0.3秒かけて変化する*/
}

.button:hover{	/* マウスが乗ったとき */
	box-shadow: 5px 5px 15px #555;	/* 少し影を濃く */
	transform: translateY(-0.18em);	/* 上方向に少し移動 */
}

上記で大事な部分は9行目と13行目、14行目のみです。
あとは見た目の記述なので何でも構いません。

動かしたいタグにtransition要素を指定するのがポイントです。
上記サンプルでは0.3秒かけて.button:hoverで指定したCSS設定に移行するという意味になります。

リンクボタンなどに使えそうです。