このサイトにあるTwitter・RSSなどへのリンクボタンのように、マウスカーソルを合わせた時にボーダーがボタンの周りを回転?移動?するようにしようと思い、CSSを書いてみたのですが思うように動きません。
まず、「btn__box」という名前のボタンを作成し、マウスを合わせるとボタンの背景と文字の色が変わる処理まではできたのですが、ボーダーをアニメーションで移動させる処理がうまくいきません。
このサイトを参考にコードを書いてみたのですが幾つか問題が発生しました。
まず、 HTML側で<a>タグで囲む必要があるのですが、そうするとAタグで囲んである文字にカーソルを合わせた時にしか4つ全てのボーダーが動いてくれません。(.btn__box a:before)で書いていない残り2つのボーダーは動きます)
文字にカーソルを合わせなくても、ボタンの端にカーソルを合わせただけで、全てのボーダーが動くようにしたいです。
あと、できれば<a>タグは使わずに
HTML
1 <p class="btn__box" input type="submit" value="" onclick="location.href='http://www.yahoo.co.jp/'">
このようなHTMLでいけるようにしたいです。
CSS初心者でよくわからず、困っています。
どなたかお力をお貸しください。
回答2件
あなたの回答
tips
プレビュー