ボタン、リストデザイン

bt1　サイズ指定　指定しない場合は横に伸びる

button

HTML

<a href="#" class="bt1">button</a>

CSS

.bt1 {
display: block;
width: 160px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #ec407a;
border: 2px solid #ec407a;
border-radius: 3px;
transition: .4s;
}
.bt1:hover {
background: #ec407a;
color: #fff;
}

bt2　文字数によって長さが変わる

variable size button 文字数に合わせて可変

HTML

<a href="#" class="bt2">variable size button</a>

CSS

.bt2 {
display: inline-block;
padding: 0.8em 1.5em;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
}

.bt2:hover {
background: #67c5ff;
color: white;
}

bt3　シンプルなボタン

simple button

HTML

<a href="#" class="bt3">simple button</a>

CSS

.bt3 {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #00bcd4;
background: #ececec;
transition: .4s;
}

.bt3:hover {
background: #00bcd4;
color: white;
}

panda

HTML

<ul class="panda">
<li><a href="#">パンダ１</a></li>
<li><a href="#">パンダ2</a></li>
<li><a href="#">パンダ3</a></li>
</ul>

CSS

.panda {
margin: 0;
padding: 0;
list-style-type: none;
}
.panda li a {
display: block;
padding: 10px 8px;
color: #fff;
background: #008b8b;
text-decoration: none;
width:300px;
border-bottom: solid 1px yellow;
}
.panda li a:hover {
background: #40e0d0;
color: #565656;
}

cat

HTML

<ul class="cat">
<li><a href="#">ネコ１</a></li>
<li><a href="#">ネコ2</a></li>
<li><a href="#">ネコ3</a></li>
</ul>

CSS

.cat {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.cat li a {
display: block;
padding: 8px 20px;
color: #fff;
background: #008b8b;
text-decoration: none;
border-right: solid 1px;
}
.cat li a:hover {
background: #40e0d0;
color: #565656;
}

bear

HTML

<ul class="bear">
<li><a href="#">クマ１</a></li>
<li><a href="#">クマ2</a></li>
<li><a href="#">クマ3</a></li>
</ul>

CSS

.bear {
margin: 0;
padding: 0;
list-style-type: none;
}
.bear li a {
display: block;
background: #ff6347;
padding: 10px 8px;
color: #fff;
text-decoration: none;
text-align: center;
border: 1px solid #800000;
margin: 5px;
width: 300px;
border-radius: 5px;
}
.bear li a:hover {
background: #b22222;
color: #fff;
}

lion

HTML

<ul class="lion">
<li><a href="#">ライオン１</a></li>
<li><a href="#">ライオン2</a></li>
<li><a href="#">ライオン3</a></li>
</ul>

CSS

.lion {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.lion li a {
display: block;
padding: 10px 20px;
color: #003300;
text-decoration: none;
width: 150px;
background: #9acd32;
border-right: dotted 1px;
}
.lion li a:hover {
background: #6b8e23;
color: #fff;
}

tiger

HTML

<ul class="tiger">
<li><a href="#">トラ１</a></li>
<li><a href="#">トラ2</a></li>
<li><a href="#">トラ3</a></li>
</ul>

CSS

.tiger {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.tiger li a {
display: block;
padding: 10px 20px;
color: #003300;
text-decoration: none;
text-align: center;
background: #9acd32;
margin-right: 10px;
border-radius: 5px;
}
.tiger li a:hover {
background: #6b8e23;
color: #fff;
}

SNS-1

ここではSNSボタンをテキスト表示、カラーで分けています

HTML

<ul class="sns1">
<li class="sns1_twitter"><a href="#">Twitter</a></li>
<li class="sns1_facebook"><a href="#">Facebook</a></li>
<li class="sns1_pocket"><a href="#">Pocket</a></li>
</ul>

CSS

.sns1 {
margin: 5px;
padding: 0px;
text-align: center;
}
.sns1 a {
text-decoration: none;
color:white;
}

.sns1 li {
display: inline-block; /* 水平に並べる */
list-style-type: none;
margin: 2px;
padding: 6px 10px;
width: 100px;
color: white;
border-radius: 4px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

.sns1 li:hover {
opacity: 0.7;
}

.sns1_twitter { background: #1da1f2; }
.sns1_facebook { background: #3b5998; }
.sns1_pocket { background: #ee4056; }

SNS-2

fontawesomeのWEBアイコンを使って作成します。
※<head>～</head>内に下記のリンクを入れてください

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">


HTML

<ul class="fas_sns_iconcolor">
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-line"></i></a></li>
<li><a href="#"><i class="fab fa-get-pocket"></i></a></li>
<li><a href="#"><i class="fas fa-rss-square"></i></a></li>
</ul>

CSS

.fas_sns_iconcolor{
margin: 0;
padding: 0;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.fas_sns_iconcolor li{
list-style: none;
margin: 0 10px 0 0;
}
.fas_sns_iconcolor li:last-child{
margin: 0 0 0 0;
}
.fas_sns_iconcolor li a{
text-decoration: none;
display: inline-block;
}
.fas_sns_iconcolor li a i{
display: inline-block;
width: 30px;
height: 30px;
color: #333;
font-size: 30px;
display: -webkit-flex;
display: -moz-flex;
display: flex;
justify-content: center;
align-items: center;
}
.fas_sns_iconcolor li a i.fa-twitter{ color: #66ccff; }
.fas_sns_iconcolor li a i.fa-facebook-square{ color: #3366cc; }
.fas_sns_iconcolor li a i.fa-line{ color: #33cc33; }
.fas_sns_iconcolor li a i.fa-question-circle{ color: #3399cc; }
.fas_sns_iconcolor li a i.fa-get-pocket{ color: #ff0000; }
.fas_sns_iconcolor li a i.fa-rss-square{ color: #ff9900; }

SNSボタンの表示サンプルはボックスデザインページも参考にしてください。