Subject-01

Subject-02

Subject-03

Subject-04

オリジナルのボタンを作成

htmlとCSSを使用して、ボタンメニューを作成してみましょう。
色や形などを自由にアレンジして下さい。

見本ページを新しいタブで開く
background:linear-gradient(to bottom,rgb(○),rgb(○));背景にグラデーションを指定します。

ページ構成

    subject3-2

  • index.html
  • style.css

参考例1

見本ページを新しいタブで開く

「border-radius:～;」を大きな数字にし、上下のpaddingを多めに設けて丸くしています。
（widthが80pxなので、font-sizeの16px＋上下に32pxずつのpaddingで、縦も80pxになります）

ソースを表示

style.css
*{
    list-style:none;
    margin:0;
    padding:0;
}
ul{
    width:120px;
    margin:20px auto 0 auto;
}
li{
    margin:10px 0 10px 0;
}
li a{
    font-size:16px;
    display:block;
    text-align:center;
    text-decoration:none;
    width:80px;
    background:rgb(100%,60%,10%);
    color:rgb(100%,100%,100%);
    border-radius:50px;
    padding:32px 0 32px 0;
    border:3px solid rgb(75%,45%,0%);
}
li a:hover{
    background:rgb(50%,30%,0%);
}

参考例2

こちらは少し難しいです。

見本ページを新しいタブで開く

「box-shadow:～;」をボタン下の暗い部分にして立体的に見せています。

ロールオーバーは、box-shadowを消し、下につけていたmarginを上につけ替え、ボタンが下に移動して押したように見せています。
（「li a」にmarginをつける際は、その上の要素である「li」に対してpaddingを1px以上つけてやる必要があります）

ソースを表示

style.css
*{
    list-style:none;
    margin:0;
    padding:0;
}
ul{
    width:120px;
    margin:20px auto 0 auto;
}
li{
    margin:10px 0 10px 0;
    padding:1px;
}
li a{
    font-size:16px;
    display:block;
    text-align:center;
    text-decoration:none;
    width:120px;
    background:linear-gradient(to bottom,rgb(20%,50%,65%),rgb(10%,40%,55%));
    color:rgb(100%,100%,100%);
    border-radius:5px;
    padding:5px 0 5px 0;
    margin:0 0 3px 0;
    box-shadow:0 3px 0 rgb(0%,20%,30%);
}
li a:hover{
    background:rgb(10%,30%,40%);
    margin:3px 0 0 0;
    box-shadow:none;
}

ヒント

どうしても難しい方は、ソースを見ながら真似してみましょう。
（一番上のピンクのボタンのソースです）

ソースを表示

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ボタン</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<ul>
<li><a href="">ボタン1</a></li>
<li><a href="">ボタン2</a></li>
<li><a href="">ボタン3</a></li>
</ul>

</body>
</html>
style.css
*{
    list-style:none;
    margin:0;
    padding:0;
}
ul{
    width:120px;
    margin:20px auto 0 auto;
}
li{
    margin:10px 0 10px 0;
}
li a{
    font-size:16px;
    display:block;
    text-align:center;
    text-decoration:none;
    width:120px;
    background:rgb(100%,30%,55%);
    color:rgb(100%,100%,100%);
    border-radius:5px;
    padding:5px 0 5px 0;
}
li a:hover{
    background:rgb(30%,30%,30%);
}
PAGE TOP