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設定に移行するという意味になります。

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

武田です。
授業で「好きな動画ベスト3」というサイトを学生の課題として与えたのですが、その時考えたレイアウトです。

実際に作ったサイトはこちら

大雑把に言うと、HTMLのdivタグで枠（今回はclass=”video”で指定したdiv枠）を作っておいて、CSSのdisplayプロパティをinline-blockにすると枠が動画や画像の大きさに合わせられるので、あとはタイトルやコメントを同じdivタグの中に入れてそれっぽく見せています。

枠が浮いて見えるようにCSSに「box-shadow: #ddd 5px 5px 20px;」などとして指定しています。

今回は学生からも質問のあった独自フォントをサイトで使えないのか？という部分もやってみました。

以下のサイトが参考になります。

日本語フリーフォントからウェブフォントを作成する方法　｜　システムエクスプレス株式会社

今回使用したフォントは、かに沢のりおさんのサイトからフリーのCheekフォントを使わせて頂きました。

Cheekふぉんと（フリーフォント）｜かに沢のりおのいろいろサイト

フォントを変えるだけでもかなり雰囲気が変わるものです。

興味のある方は、表示したサイトでCtrl + Uキーを押してHTMLやCSSの中身を見てみてください。