【バナーもどき第2弾】[CSS+HTML]グラデーションバナーもどき

もっと目立つ動きあるバナーもどきを作ろう！

背景がグラデーションで、立体感を出すために影をつけた。
カーソル乗せたら光が動いた感じ＋浮かせる。
「それだけじゃつまらんか？」と、文字下に文字数だけ謎の三角つけた。
ベンキョウベヤダベヤ

第1弾のバナーもどき⇩

半分で文字色反転するバナーを作りたかったバナーの素体の色が半分で色が変わってて、それとは逆に文字が半分色が違う。つまり背景と文字の色が反転している状態を半分ずつという状態。.*ベンキョウベヤ*.おわかりいただけただろうか…ほら真ん中の文字が...

では、インパクトが薄い気がしてきたので

グラデーションで、カーソル合わせたとき、動いたらいんじゃね？

という単純発想。

もっと目立つ動きあるバナーもどきを作ろう！
実際のコード
1. HTML
2. CSS
結局バナーを作らないまま数年経っている
1. 第1弾はコチラ

実際のコード

HTML

<a class="banner-modoki" href="https://qooga.jb-jk.net/wp/" title="開発・技術ブログ：ベンキョウベヤダベヤ">ベンキョウベヤダベヤ</a>

CSS

<style>
.banner-modoki {
  -webkit-text-emphasis: filled triangle #fff;
  text-emphasis: filled triangle #fff;
  text-emphasis-position: under;
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #4e54c8, #8f94fb);
  border: none;
  border-radius: 5px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.banner-modoki::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-45deg);
  transition: left 0.5s ease;
}
.banner-modoki:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  color: #fff;
}
.banner-modoki:hover::after {
  left: 100%;
}
</style>

結局バナーを作らないまま数年経っている

お気づきの方もおられよう『サイドバーの勉強部屋へのリンク』を目立たせようという四苦八苦である。
バナーを作ろうという気持ちがないよね。
シリーズできちゃったら、どうしようね…

第1弾はコチラ

[CSS+HTML]半分色が違う色反転バナーもどき