###前提・実現したいこと
Word Pressの「投稿の編集」画面の本文テキストで、以下のボタンを実装したい。
実装したいボタン内容
###発生している問題・エラーメッセージ
CSSのコードのHTMLへの適応がうまく行きません。
(CSSを外部ファイルではなく、直接埋め込む方法で実装したいです。)
###該当のソースコード
<style type="text/css"> $color: #2194E0; @keyframes sheen { 0% { transform: skewY(-45deg) translateX(0); } 100% { transform: skewY(-45deg) translateX(12.5em); } } .wrapper { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .button { padding: 0.75em 2em; text-align: center; text-decoration: none; color: $color; border: 2px solid $color; font-size: 24px; display: inline-block; border-radius: 0.3em; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; &:before { content: ""; background-color: rgba(255,255,255,0.5); height: 100%; width: 3em; display: block; position: absolute; top: 0; left: -4.5em; transform: skewX(-45deg) translateX(0); transition: none; } &:hover { background-color: $color; color: #fff; border-bottom: 4px solid darken($color, 10%); &:before { transform: skewX(-45deg) translateX(13.5em); transition: all 0.5s ease-in-out; } } } </style> <body> <div class="wrapper"> <a href="#" class="button">Shiney!</a> </div> </body> </head>
###試したこと
上記のようなコードを書きました。
回答2件
あなたの回答
tips
プレビュー