CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでダウンロードボタンをスタイリングする方法【コード例付き】

Webサイトに設置するダウンロードボタンは、CSSを使って自由にデザインできます。背景色や余白、ホバー時の変化などを設定することで、ユーザーの目を引く魅力的なボタンを作成できます。

ここでは、Font Awesomeのダウンロードアイコンと組み合わせた、実用的なダウンロードボタンのスタイリング例をご紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button{
   background-color: rgb(78, 15, 129);
   border: none;
   color: white;
   padding: 12px 30px;
   cursor: pointer;
   font-size: 30px;
   font-weight: bolder;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
   background-color: rgb(42, 7, 82);
}
h1{
   text-align: center;
}
</style>
</head>
<body>
<h1>Download Buttons Styling Example</h1>
<h1>Button 1</h1>
<button style="margin-left:33%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button>
<h1>Button 2</h1>
<button style="text-align: center; width: 100%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button>
</body>
</html>

コードのポイント解説

  • background-color：ボタンの背景色を紫系（rgb(78, 15, 129)）に設定しています。
  • border: none：デフォルトの枠線を消して、フラットなデザインにしています。
  • padding: 12px 30px：上下12px、左右30pxの余白を付け、押しやすい大きさにしています。
  • cursor: pointer：マウスオーバー時にカーソルがポインター（手の形）に変わるようにしています。
  • button:hover：ホバー時に背景色が濃い紫（rgb(42, 7, 82)）へ変化し、インタラクティブな印象を与えます。
  • Font Awesome：<i class="fa fa-download"></i> を使うことで、テキストの前にダウンロードアイコンを表示できます。

Button 1 では margin-left:33% を指定してボタンを中央寄せに、Button 2 では width: 100% を指定して横幅いっぱいに広がるボタンを作っています。用途に応じてレイアウトを使い分けると良いでしょう。

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSでダウンロードボタンをスタイリングする方法【コード例付き】

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"