テキストリンクのhover時に、他のリンクのテキストを暗くし、自身を明るく強調するスポットライトエフェクトをかけ、さらに少し右に移動します。サンプルのリンク先は実際の弊社製品のものを使用していて、別タブまたは別ウィンドウで開きます。

サンプルのhtmlソース

<nav class="">
  <a href="../../p001/001.html" target="_blank">百万石&nbsp;BtoB&nbsp;WEB受注システム</a>
  <a href="../../b2b-zero/index.html" target="_blank">0万石&nbsp;BtoB&nbsp;WEB受注システム</a>
  <a href="../../koubai/index.html" target="_blank">EDI連動型・百万石&nbsp;購買システム</a>
  <a href="http://stock.web-order.jp/index.html" target="_blank">0万石&nbsp;在庫照会システム</a>
  <a href="../../kaihatu.html" target="_blank">ソフトウェア開発・システム開発</a>
  <a href="../../smart/index.html" target="_blank">スマートフォン向け&nbsp;WEBシステム開発</a>
</nav>

サンプルのCSSソース

.container {
    padding: .5rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f34f5a;
    width: 100%;
    min-height: calc(100vh - 2rem);
    margin:15px 0;
    }
nav {
    margin: 0 auto;
    }
nav:hover a {
    opacity: 0.3;
    }
nav a {
    color: #ffca52;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease;
    }
nav a:hover {
    color: #fff;
    opacity: 1;
    transform: translateX(0.5rem);
    }