CSSを使いボタンを設置したい

CSSを使いボタンを設置したい
コードは調べて作成しましたが、ボタン内の文字色が変更できない
ボタン内の文字色と太さを大きくする方法を教えて下さい
おそらくCSSの「.btn:hover」の記載内容が反映されていないと思います
太さについては「font-weight: bold;」で間違いないでしょうか？
宜しくお願い致します

<heads><style>
.btn {
background: #927a49;
box-shadow: 0 3px #b22222;
position: relative;
display: inline-block;
top: -2px;
padding: 10px 20px;
font-weight: bold;
}
.btn:hover {
box-shadow: 0 1px #000000;
top: 1px;
}
</style></heads>
<p><a class="btn" href=""></a></p>

maisumakun

2025/01/26 01:38

> ボタン内の文字色が変更できないそのために書いた（つもりの）コードは、ご提示のコードのうちどの部分でしょうか。

int32_t

2025/01/26 23:48

HTMLやCSSのコードを読みやすくするため、``` で囲ってください。 https://teratail.com/help#about-markdown

行動規範の内容に同意します

回答2件

Windows 11、Edge、Chrome、Firefoxで確認しました。
提示されたソースで、ボタンにカーソルを当てると文字は太くなっています。
文字の色は、.btn:hover{}の中ならどこでもいいですが、例えばfont-weight: bold;の後ろに、

color: #FF0000;

を追加するとよいです。(上記の例は赤の場合)

(追記)
フォントサイズを変更するには、junerさんのコメントのリンク先を見てください。

以下、同じフォントサイズで、さらに太くする方法を説明します。
boldより太くするには、701～1000の数字を指定します。boldは700と同じです。

font-weight: 1000;

ただし、実際に効き目があるかはフォントによります。
Windows 11の場合、3ブラウザーのデフォルトのフォントはメイリオですが、700も1000も同じです。
これを例えば「Segoe UI」にすると、800以上はboldより太くなります。

font-family: "Segoe UI";

いろいろなフォントで試してみてください。

投稿2025/01/26 10:19

編集2025/01/27 14:48

hiroki-o

総合スコア1332

takami3

2025/01/27 02:40

カラーの変更ができました。ありがとうございます。現在の太文字より更に大きくするにはどのような方法がございますか何卒宜しくお願い致します。

juner

2025/01/27 05:15

css プロパティの font-size は確認されましたでしょうか？ https://developer.mozilla.org/ja/docs/Web/CSS/font-size

takami3

2025/01/28 01:22

juner様ご回答ありがとうございます .btn {以下に font-weight: 1000;やfont-size: 2.2rem;などを追加しましたが何の動きもありませんでした。同じく.btn:hover {}自体削除しても何の変化もありません。記述の仕方に問題があるのでしょうか？何かお分かりになりましたら教えていただけると幸いです宜しくお願い致します。

takami3

2025/01/28 01:27

hiroki-o様ご回答ありがとうございます .btn {以下に font-weight: 1000;やfont-size: 2.2rem;などを追加しましたが何の動きもありませんでした。 font-family:も試してみましたが変化がありません。同じく.btn:hover {}自体削除しても何の変化もありません。記述の仕方に問題があるのでしょうか？何かお分かりになりましたら教えていただけると幸いです宜しくお願い致します。

hiroki-o

2025/01/28 12:56

実現したいボタンの仕様について、質問を編集して明記してください。最初に提示されていたソースでは、ボタンにカーソルを当てた時に文字が太くなっていましたが、最初から太くしたいのですか？あと、以前の質問でも指摘されていましたが、<heads>は間違いなので<head>に修正してください。

takami3

2025/01/29 07:09

ご回答ありがとうございます注意いたします

行動規範の内容に同意します

普通に動きますね。文字色はcolor指定でできます。
とはいえボタンの挙動がちょっと気持ち悪いのでもう少し精査したほうが良いと思います

html
1<style>
2.btn {
3  background: #5fb2c1; 
4  box-shadow: 0 3px #3b8a98; 
5  position: relative; 
6  display: inline-block; 
7  top: -2px; 
8  padding: 10px 20px; 
9  color:black;
10}
11.btn:hover {
12  box-shadow: 0 1px #3b8a98; 
13  top: 1px; 
14  font-weight: bold; 
15  color:red;
16}
17</style>
18<p>
19<a class="btn" href="#test">Nice Button!</a>
20</p>