SANGOのテーマに合いそうなボタン＋アコーディオンのデザイン3種

2020年5月16日2022年2月23日 5分

当サイトでも使用しているSANGOのテーマには、イケてるデザインやオブジェクトが標準で多数使えるようになっていますが、ちょっとオリジナル感を出したい＋アコーディオンをちょっと違うデザインで使用してみたい用に3つ作りました。

今回は、そんなSANGOのテーマに合いそうなボタン＋アコーディオンのデザイン3種についてご紹介します。

3種全てHTML＋CSSのコピペでできるように作っています。

青いボタン
オレンジのボタン
フラットで、色が反転するボタン

青いボタン

コードを表示

ここに中身

標準のカラーに合わせて作ったボタン＋アコーディオンで、押下すると沈み込むようなオブジェクトです。

使うサイトのトンマナに合わせてCSSの色を整えてあげるといい感じになります。

コードを表示する

HTML

<center>
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">
コードを表示 
</label>
<div class="acd-content">
<p>
<!--▼ここから中身▼-->
ここに中身
<!--▲ここまで中身▲-->
</p>
</div>
 </center>

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    text-align: center;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #FFFFFF;
    font-weight: bold;
    background: #4f96f6;
    cursor :pointer;
    transition: all 0.5s;
  text-decoration: none;
  border-bottom: solid 4px #627295;
  border-radius: 4px;
}

.accbox label:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/*アイコンを表示*/
.accbox label:before {
font-family: "Font Awesome 5 Free";
  content: "\f105";
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#6bb6ff;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    margin-top:20px;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    text-align:left;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 0;
    background: #FFFFFF;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px
    
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f107';
}

オレンジのボタン

コードを表示

ここに中身

上記青いボタンの色違いで、オレンジでのボタンです。

コードを表示する

HTML

<center>
<input id="acd-check3" class="acd-check2" type="checkbox">
<label class="acd-label2" for="acd-check3">
コードを表示 
</label>
<div class="acd-content2">
<p>
<!--▼ここから中身▼-->
ここに中身
<!--▲ここまで中身▲-->
</p>
</div>
 </center>

CSS

/*--------------------------------------
  コード表示アコーディオンBOX_orange
--------------------------------------*/
.acd-check2{
    display: none;
}
.acd-label2{
    color: #FFFFFF;
    font-weight: bold;
    background: #ffa200;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 12px 10px;
    max-width:400px;
    text-decoration: none;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
    border-radius: 6px;
}

.acd-label2:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(1px);/*下に動く*/
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.0));
}

/*アイコンを表示*/
.acd-label2:before {
font-family: "Font Awesome 5 Free";
  content: "\f105";
    padding-right: 8px;
}

/*ラベルホバー時*/
.acd-label2:hover {
    background :#ffc257;
}
.acd-content2{
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    text-align: left;
}
/*クリックで中身表示*/
.acd-check2:checked + .acd-label2 + .acd-content2{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}

/*アイコンを入れ替える*/
.acd-check2:checked + .acd-label2:before {
    content: '\f107';
}

フラットで、色が反転するボタン

コードを表示

ここに中身

シャドウなどを使わないベタ塗りでフラットなデザインのボタンで、ホバーすると色が反転する仕様です。

コードを表示する

HTML

<center>
<input id="acd-check2" class="acd-check_5" type="checkbox">
<label class="acd-label_5" for="acd-check2">
コードを表示 
</label>
<div class="acd-content_5">
<p>
<!--▼ここから中身▼-->
ここに中身
<!--▲ここまで中身▲-->
</p>
</div>
</center>

CSS

/*--------------------------------------
  コード表示アコーディオンBOX　色反転_5
--------------------------------------*/
.acd-check_5{
    display: none;
}
.acd-label_5{
    color: #4f96f6;
    background-color: #eeeeee;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 12px 2px;
    max-width:400px;
    text-decoration: none;
}

.acd-label_5:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}

/*アイコンを表示*/
.acd-label_5:before {
font-family: "Font Awesome 5 Free";
  content: "\f0da";
    padding-right: 8px;
}

/*ラベルホバー時*/
.acd-label_5:hover {
  color: #FFFFFF;
  background-color: #4f96f6;
  transition: .6s;
}
.acd-content_5{
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    text-align: left;
}
/*クリックで中身表示*/
.acd-check_5:checked + .acd-label_5 + .acd-content_5{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}

/*アイコンを入れ替える*/
.acd-check_5:checked + .acd-label_5:before {
    content: '\f0d7';
}