Go to Qiita Advent Calendar 2024 Top
LoginSignup
tomokei5634
@tomokei5634

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

【CSSスペシャリストの方へ】桃太郎ボタンを作りたいのですが...

Q&A

Closed

CSSボタンマウスオーバーアクションホバー

解決したいこと

  • 現在、ボタンを作成しています。
  • マウスオーバーすると「桃太郎で、お婆さんが桃を割ったとき」のように、真ん中からパッカーンと左右に割れる表現をしたいです。
  • 下記までは作れました。

See the Pen qiita_momotarou_btn by tomokei (@tomokei5634) on CodePen.

課題

  • .btn-textを「桃の中身」とします。
  • .btn-cover::beforeおよび.btn-cover::afterを「桃の皮」とします。

相談したいこと

  • 「桃の皮」に載せるテキストの、カッコいいコーディング方法はありませんか？

詳細

  • 上記のcodepen内では、桃の皮のテキストを、スタイル内に直書きしています。
css
/* イカしてない方法 　*/
.btn-cover::before {  content: "BUT";  }
.btn-cover::after {  content: "TON";  }
  • カッコいい方法ではないですし、ボタンが存在するたびにCSSを触るのもイカしていません。
  • 「BUTTON」は６文字と偶数ですが、奇数文字の場合は、どうするんだ？という問題もあります。
  • HTML側で桃の中身を触ると、桃の皮も変わるのが、実用的かと存じます。
  • 「javascriptで桃の中身を取得して、桃の皮へ反映する方法」を思いつきましたが、「もっとカッコいい方法があるかもしれない」「もしかすると、javascriptを使わなくても、表現できる方法があるのかもしれない」という想いから、本稿の相談をした次第です。
  • いろいろなホバーアクションのボタンデザインをググりましたが、「これこれ」というものが見つけられませんでした。
  • アイデアや参考サイトを、ご教授いただけると幸いです。

要望

  • あくまで要望であって、無理・難題であれば、考慮いただかなくて結構です

  • 要望１）ボタンが増える度に、CSSとjavascriptを触りたくない。あくまでHTML側の編集だけで終えたい。

  • 要望２）画像作成はしたくない。あくまでHTML側の編集だけで終えたい。

  • 要望３）ライブラリには頼りたくない（でも、あるなら存在は教えて欲しい...）

補足

  • 上記のcodepenの構造、スタイルは守っていただく必要がありません。
  • 最終的に桃太郎ボタンが実装できれば、こだわりはありません。

どうぞよろしくお願い致します。

2

1Answer

_y_s
@_y_s

なかなか面白そうなのでいろいろ試してみました。

See the Pen Button test by _y_s (@ys-j) on CodePen. 

<button class=btn-cover data-text-skin=Peach>...</button>

.btn-cover::before, .btn-cover::after {
  content: attr(data-text-skin);
}

というようにdata-*属性に書いておいてattr()で読み取るのが無難かなと思います（HTMLを2箇所変更する手間はありますが）。
あとは、はみ出る部分を

.btn-cover::before, .btn-cover::after {
  overflow: hidden;
  text-overflow: clip; /* これはなくてもよさそうです */
}

で隠せば概ね完了です。
このままでは右側の皮のテキストが左寄せになっているので

.btn-cover::after {
  direction: rtl;
}

とすればいい感じじゃないでしょうか。

3Like

Comments

  1. @tomokei5634

    Questioner

    ありがとうございます！ありがとうございます！ありがとうございます！
    目からウロコの脱帽です。

    `attr()`のことを知りませんでした。
    HTML→CSSの発想がなかったです。大変、勉強になりました。
    いろいろなことに応用できそうでワクワクしてます。

    どうも、ありがとうございました！

Your answer might help someone💌

LoginSign Up