はじめに
こんにちは! 中学2年生のWardHamatsu67です! 今回は、前回の続きで、CSSも使って見た目を本当のボタンにしていきたいと思います。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<link rel="stylesheet" href="sample.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Klee+One&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<body>
<p class="colorful">明けまして
<span>お</span>
<span>め</span>
<span>で</span>
<span>と</span>
<span>う</span>
ございます。</p>
<p></p>
<a href="./blue.html" class=class="btn btn--orange btn--radius">ここから</a>
</body>
</html>
CSSのクラスを読み込むところを追加しただけで、他は前回と変わりません。
.colorful {
font-family: "Klee One", cursive;
font-weight: 400;
font-style: normal;
}
.colorful span:nth-child(6n+1){color: #ff0000;}
.colorful span:nth-child(6n+2){color: #00ff00;}
.colorful span:nth-child(6n+3){color: #0000ff;}
.colorful span:nth-child(6n+4){color: #aa0000;}
.colorful span:nth-child(6n+5){color: #00aa00;}
.btn--orange,a.btn--orange {
font-family: 'Klee One', cursive;
font-family: 'Shippori Mincho', serif;
color:#00bfff;
color: #f2f;
background-color: #abd100;
}
.btn--orange:hover,a.btn--orange:hover {
color: #fff;
background: #a6e500;
}
a.btn--radius {
border-radius: 100vh;
}
CSSで色や角をどのくらい丸めるのかを設定していきます。
今回はボタンの色を少し濃い黄緑色に、「ここから」の文字を少し濃いピンクにしました。
完成図
ボタンのデザインを変えただけなのに、結構、全体の見た目が変わったように見えますね。もちろん。、「ここから」を押すと...
こうなります。
おわりに
いかがでしたか。なんか前回の投稿から今回までが結構早かったと思います。今回のはCSSが結構面倒ですが、青看板などと比べたら簡単です。
この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。