スライド下線リンクを作る5つの方法

下線のリンクはウェブ自体と同じくらい古いです.アンダーラインは、それが他のどこかにリンクするユーザーにアフォーダンスを与えます.デフォルトでは、すべてのリンクがアンダーラインされ、それは十分に多くのウェブサイトに適しています.
しかし、下線に少しの動きを加えることは、生命にあなたのウェブサイトをもたらすのを助けることができる楽しいミクロアニメーションをつくることができます.( buzzword正しいか)

アンダーラインを再現する

アンダーライントランジションに飛び込む前に、最初にネイティブアンカーアンダーラインを再作成する必要があります.
開始するには、リンクに色を追加し、それがリンクであることを示すために色を追加し、我々は自分自身を設定できるように我々は、ネイティブの下線を取り除くでしょう.

a {
  color: saddlebrown;
  text-decoration: none;
}

ここから、絶対位置の擬似要素を使用できます.::before ) 同じ効果を達成するために.しかし、絶対的なポジショニングは1行にアンダーラインを表示するだけであるので、あなたが自信を持っている何かのためにこれを使用していないならば、私は1つの線以上であるというわけではありません.
したがって、複数行のアンダーラインを作成する他のオプションはbackground プロパティ.のサイズや位置を変更することはできませんのでbackground-color , 私たちはbackground-image . 私はグラデーションで同じ色を繰り返します、私は背景を堅実な色にしようとしています、しかし、あなたはそれに本当のグラデーションを作ることによって確かにスパイスものを缶詰にします.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
}

グラデーションセットを使用すると、アンカーの背景色をグラデーションに設定します.したがって、そのサイズと位置を変更する必要があります.
私たちはbackground-size 'の幅100% と高さ0.1em —テキストサイズが変更された場合、アンダーラインを比例的にスケールします.
セットbackground-position-y to 100% アンダーラインをアンカーの底に置くと、アンダーラインのように見えます.
我々はまた、後で我々の下線をアニメーション化することができますので、そこに移行をスローします.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-x: 0%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

Edit on CodePen

1 .スライドとバック

この効果で、我々はホバーで左から右へ下線を結ぶリンクを作成するつもりです.ときに立ち往生、アンダーラインは左にスライドし、消える.
私たちはbackground-size 幅0% 最初はそれを隠す.ホバーでは、我々は100% それを左から右へスライドさせる.
あなたが方向を逆にしたいならばbackground-position-x to 100% 開始位置を右に変更します.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

スライド中出し

この効果でリンクを押すと、ラインは中央から始まり、左右のエッジに同時に広がります.ホバーをオフにすると、ラインは中央に戻ってスライドして消えます.
この1つと前のものとの唯一の違いは、我々が変化することですbackground-position-x to 50% アンダーラインの原点を真ん中で作る.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 50%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

スライド・アンド・アウト

この効果とのリンクでホバリングは、最初の効果とまったく同じように見えます.しかし、ホバーをオフにすると、下線は右側に戻って左にスナップしてオフにスライドされます.
残念ながら、CSSでは擬似クラスを停止していませんがCSS tricks to mimic it for certain effects .
我々は本質的に同じCSSトリックを使用するが、ここではアンダーラインを最初に目に見えないことを利用する.セットbackground-position-x: 100% ので、ホバーを右にスライドし、それを変更する私たちの最初のスタイルで0% ホバーでは、ラインが左から来るように.

a {
  color: saddlebrown;
  text-decoration: none;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}

Edit on CodePen

ミドルへのスライド

この効果で、我々は2つの線を我々は外側の端に起動し、内側には、途中で会うまで内側にスライドさせます.ホバーオフでは、彼らは端にスライドして消える.
2つの異なる線があるので、2つの線形勾配を作成する必要があります.いつでも別のバックグラウンドプロパティを追加するには、各項目の値の後にコンマを追加する必要があります.しかし、値が両方のために同一であるならば、CSSはちょうどそれを繰り返します.これは、各線形グラデーションに対して同じである場合、各バックグラウンドプロパティを手動で複製する必要はありません.
線のための他のすべてが同じであるので、我々はちょうど彼らの位置を調節する必要があります.我々は、最初の行のbackground-position-x to 0% 左のエッジと2番目の2番目のを開始するには100% 右端にそれを開始します.

a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(#d99a5a, #d99a5a);
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 0%, 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 0.1em;
}

Edit on CodePen

常に見える下線変形

あなたが常に存在するために下線を望むならば、あなたはまだ最初の4つの影響を使うことができます.唯一の違いは、追加のアンダーラインを同じlinear-gradient エフェクト.スライドの中間効果については、我々は3を追加する必要があります注意してくださいlinear-gradient その効果はすでに2つを使用します.

/*
// Shared Styles
*/
a {
  color: saddlebrown;
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
  text-decoration: none;
}

/*
// Slide in & back
*/
.slide-in-back {
  background-position-x: 0%;
}

.slide-in-back:hover,
.slide-in-back:focus,
.slide-in-back:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide in & out
*/
.slide-in-out {
  background-position-x: 100%;
}

.slide-in-out:hover,
.slide-in-out:focus,
.slide-in-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
  background-position-x: 0%;
}

/*
// Slide middle out
*/
.slide-middle-out {
  background-position-x: 50%;
}

.slide-middle-out:hover,
.slide-middle-out:focus,
.slide-middle-out:active {
  background-size: 100% 0.1em, 100% 0.1em;
}

/*
// Slide to middle
*/
.slide-to-middle {
  background-image: linear-gradient(#d99a5a, #d99a5a), linear-gradient(
      #d99a5a,
      #d99a5a
    ), linear-gradient(saddlebrown, saddlebrown);
  background-size: 0% 0.1em, 0% 0.1em, 100% 0.1em;
  background-position-x: 0%, 100%;
}

.slide-to-middle:hover,
.slide-to-middle:focus,
.slide-to-middle:active {
  background-size: 100% 0.1em, 100% 0.1em, 100% 0.1em;
}

Edit on CodePen

トップへのスライド

この効果のために、我々は常に見えるアンダーラインを持っていますが、ホバーでは、アンカーの上部にアンダーラインを成長させます.
この下線はテキストの下でスライドするので、あなたがcontrast checker 良いアクセシビリティを確保する.
アンダーラインは常に目に見えるので、デフォルトを変更してくださいbackground-size 'の幅100% . アンダーラインをリンクの一番上にスライドさせるにはbackground-size 'sの高さ100% .

a {
  color: black;
  background-image: linear-gradient(#d99a5a, #d99a5a);
  background-size: 100% 0.1em;
  background-position-y: 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  background-size: 100% 100%;
}

Edit on CodePen

ボーナス！

これを作るために、私はあなたのために少しの楽しみがあります.私はこの効果がTwitterでラウンドを作るのを見ました、そして、それは私がこのポストを書くように促したものです.
作成a CodePen ここで、彼は既存の下線の上の下線をアニメーション化します.
この効果を作成する方法を学ぶJhey's Egghead tutorial.

もっと？

クールな下線リンク効果がありますか?私はそれを見たい!
私に送ってくださいcontact page !