フッターにメールと電話ボタンをつける

2018 10/12

2018年10月2日 2018年10月12日

HTMLはこんな感じ

<div id="footerContact">
  <a href="#aaa" class="btn-left">メール</a>			
  <a href="tel:0123-456-789 class="btn-right">電話</a>
</div>

</div>

CSSはこんな感じ

#footerContact {
  align-items: center;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  bottom: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  z-index: 99;
}

.btn-left{
  background-color: #3B5998;
  border-right:1px solid #ccc;
  display: block;
  padding: 15px 0;
  text-align: center;
  width:50%;
}

.btn-right{
  background-color: #389F57;
  border-leftt:1px solid #ccc;
  display: block;
  padding: 15px 0;
  text-align: center;
  width:50%;
}

#footerContact {

align-items: center;

box-sizing: border-box;

border-top: 1px solid #ccc;

bottom: 0;

background: #fff;

display: flex;

justify-content: space-around;

position: fixed;

width: 100%;

z-index: 99;

}

.btn-left{

background-color: #3B5998;

border-right:1px solid #ccc;

display: block;

padding: 15px 0;

text-align: center;

width:50%;

}

.btn-right{

background-color: #389F57;

border-leftt:1px solid #ccc;

display: block;

padding: 15px 0;

text-align: center;

width:50%;

}

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

ore

フッターにメールと電話ボタンをつける

この記事を書いた人

関連記事