<p>■シンプルなhoverセレクタ</p>
<a class="txt" href="https://example.com">アンカーテキスト</a>

<p>■transitionプロパティとhoverセレクタ</p>
<a class="button" href="https://example.com">アンカーテキスト</a>

<p>■transformプロパティを活用した動的なhoverセレクタ</p>
<a class="button2" href="https://example.com">アンカーテキスト</a>

<p>■疑似要素を使用した複雑なホバーアニメーション</p>
<button class="button3">Hover Me</button>
/*シンプルなhoverセレクタ
---------------------*/
.txt:hover {
  color: #ff0000;
  text-decoration: underline;
}
/*/シンプルなhoverセレクタ*/

/*transitionプロパティとhoverセレクタ
---------------------*/
.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
  
  /*以下、装飾用CSS*/
  padding:10px;
  display:block;
  width:200px;
  text-align:center;
}
.button:hover {
  background-color: #2980b9;
}
/*/transitionプロパティとhoverセレクタ*/

/*transformプロパティを活用した動的なhoverセレクタ
---------------------*/
.button2 {
  transition: transform 0.3s ease;
  background-color: #3498db;
  transition: background-color 0.3s ease;
  
  /*以下、装飾用CSS*/
  padding:10px;
  display:block;
  width:200px;
  text-align:center;
}

.button2:hover {
  transform: scale(1.1) translateY(-5px);
  background-color: #2980b9;
}
/*/transformプロパティを活用した動的なhoverセレクタ*/

/*疑似要素を使用した複雑なホバーアニメーション
---------------------*/
.button3 {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.button3::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #2ecc71;
  transition: left 0.3s ease;
}

.button3:hover::before {
  left: 0;
}
/*/疑似要素を使用した複雑なホバーアニメーション*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.