共通のHTML・CSS

以下で紹介しているサンプルでは共通のHTML・CSSとして下記がそれぞれ指定されており、CSSの場合はこの共通スタイルに各サンプルで紹介しているCSSを追記・変更などをすることで見栄えの確認ができると思います。
一部場合によっては必要ない記述もあるので、それらは環境にあわせて削除するなどしてください。

また、バレットが選択された状態を示すためにis-activeというクラスがアクティブ時に付加されるという想定で紹介しており、クラスが付加される動きについてはJavaScriptを使用しています。

HTML

<ul>
	<li><a href="#" class="is-active">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

CSS

ul {
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1em;
}
ul li a {
	display: inline-block;
	width: 18px;
	height: 18px;
	font-size: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	outline: none;
	box-sizing: border-box;
	transition: .2s ease-in-out;
}

※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

※以下で紹介しているサンプルソースは全てプレフィックスを省いた状態となっていますので、必要であれば各自で追記してください。

1. Circle #1

シンプルなサークルアイコンを表現したもので、ホバー時とアクティブ時にサークル内が塗りつぶされます。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
	border-radius: 50%;
}
ul li a:hover,
ul li a.is-active {
	background-color: #fff;
}

2. Circle #2

同じくシンプルなサークルアイコンを表現したもので先ほどのものとほとんど変わりませんが、サークル内を塗りつぶす際にrgbaを使用し、ホバー時では透過されているカラーで塗りつぶすというものになります。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
	border-radius: 50%;
}
ul li a:hover {
	background-color: rgba(255,255,255,.5);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
}

3. Circle #3

box-shadowを使って、アクテイブ時に塗りつぶしなしのサークルアイコンに変化するものです。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	background-color: rgba(255,255,255,.5);
	border-radius: 50%;
}
ul li a:hover {
	background-color: rgba(255,255,255,1);
}
ul li a.is-active {
	background-color: transparent;
	box-shadow: 0 0 0 2px rgba(255,255,255,1);
}

4. Circle #4

同じくbox-shadowを使ったもので、こちらはアクティブ時に外側から内側に塗りつぶされていくような見た目にできます。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	box-shadow: 0 0 0 2px rgba(255,255,255,1) inset;
	border-radius: 50%;
}
ul li a:hover {
	background-color: rgba(255,255,255,.5);
}
ul li a.is-active {
	background-color: transparent;
	box-shadow: 0 0 0 18px rgba(255,255,255,1) inset;
}

5. Scale #1

アクティブ状態時にカラー変更に加えてサイズを少し大きくしたものです。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	background-color: rgba(255,255,255,.5);
	border-radius: 50%;
}
ul li a:hover {
	background-color: rgba(255,255,255,1);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
	transform: scale(1.4);
}

6. Scale #2

アクティブ時の見た目は先ほどのものと同じですが、こちらはホバー時にもサイズが大きくなる動きを取り入れてみたもので、animationを使うことでホバー時にアイコンが一瞬大きくなって、また元のサイズに戻るという動きを実装しています。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	background-color: rgba(255,255,255,.5);
	border-radius: 50%;
}
ul li a:hover:not(.is-active) {
	animation: hover .3s ease-in-out;
}
@keyframes hover {
	0%   { transform: scale(1);}
	50%  { transform: scale(1.25);}
	100% { transform: scale(1);}
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
	transform: scale(1.4);
}

7. Flip #1

transform: rotateYを使って、ホバー事やアクティブ時にアイコンがフリップするようにしたものです。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	background-color: rgba(255,255,255,.4);
	border-radius: 50%;
	transition: .4s ease-in-out;
}
ul li a:hover:not(.is-active) {
	background-color: rgba(255,255,255,.6);
	transform: rotateY(180deg);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
}

8. Flip #2

同じくフリップの動きですが、こちらはrotateYとrotateXの2つを組み合わせることで斜めに回転するような動きにしたものです。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	background-color: rgba(255,255,255,.4);
	border-radius: 50%;
	transition: .4s ease-in-out;
}
ul li a:hover {
	background-color: rgba(255,255,255,.6);
	transform: rotateY(180deg) rotateX(-180deg);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
}
ul li a.is-active:hover {
	transform: rotate(0);
}

9. Square

スクエアタイプのアイコンで、背景はホバー時に透過、アクティブ時には透過させないようにしたものです。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
}
ul li a:hover {
	background-color: rgba(255,255,255,.5);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
}

10. Diamond

スクエアにtransform: rotateを追記するだけで、このようなダイヤタイプができます。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
	transform: rotate(45deg);
}
ul li a:hover {
	background-color: rgba(255,255,255,.5);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
}

11. Square × Diamond #1

スクエアとダイヤを組み合わせたもので、通常時はスクエアですがホバー時とアクティブ時に回転してダイヤの見栄えになります。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
}
ul li a:hover {
	transform: rotate(45deg);
}
ul li a.is-active {
	transform: rotate(45deg);
	background-color: rgba(255,255,255,1);
}

12. Square × Diamond #2

基本的な部分は先ほどのものと同じで、transform: rotateの値を大きくすることでくるくるっと回転させることができます。
実装には共通CSSに下記を追記します。

CSS

ul li a {
	border: 2px solid #fff;
}
ul li a:hover {
	background-color: rgba(255,255,255,.5);
	transform: rotate(135deg);
}
ul li a.is-active {
	transform: rotate(135deg);
	background-color: rgba(255,255,255,1);
}

13. Rectangle (Border)

長方形（少し太めのボーダー）の見た目を表現したもので、アクティブ時に少し太くなる（高くなる）ようにしてみたものです。
実際にこのようなタイプのものを取り入れているサイトではもっとそれぞれの間隔を詰めて、一本のラインのようにして配置しているのをよく見かけますね。
実装には共通CSSの一部を変更しつつ、下記を追記します。

CSS

ul li {
	margin: 0 .75em;
}
ul li a {
	width: 36px;
	height: 6px;
	background-color: rgba(255,255,255,.5);
}
ul li a:hover {
	background-color: rgba(255,255,255,1);
}
ul li a.is-active {
	background-color: rgba(255,255,255,1);
	transform: scaleY(1.8);
}

14. Triangle

borderを使って下向きの三角アイコンを作り、それをアクティブ時にカラーを変更しつつtransform: rotateXでくるっと上向きにするというものです。
実装には共通CSSの一部を変更しつつ、下記を追記します。

CSS

ul li a {
	width: 0;
	height: 0;
	border-top: 16px solid rgba(255,255,255,.5);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
ul li a:hover {
	border-top-color: rgba(255,255,255,1);
}
ul li a.is-active {
	border-top-color: rgba(255,255,255,1);
	transform: rotateX(-180deg);
}