ทำไอค่อนติดต่อลอยด้านข้าง ด้วยภาพ

โค้ดไอค่อนข้อมูลติดต่อ

 <style>


.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 6px 5px 1px 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #522;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.image-button{
    border: none;
  color: white;
    text-align: center;
  text-decoration: none;
  display: block;
  font-size: 8px;
  font-weight: bold;
  
  cursor: pointer;
}
.image-button img {
      height: 40px;
            border: none;
    }
.content {
  margin-left: 75px;
  font-size: 30px;
}
</style>
<body>

<div class="icon-bar"> 
  
/* โทร */
<a class="image-button" href="tel: ใส่เบอร์โทร"><img alt="โทรได้เลย" src="
ใส่ที่อยู่ภาพไอค่อนโทร" /></a>

/* เฟซบุก */
  <a class="image-button" href="https://www.facebook.com/ใส่ที่อยู่เฟซบุก"><img alt="ติดตามเราในเฟซบุก" src="ใส่ที่อยู่ภาพไอค่อนเฟซบุก" /></a> 
 
/* อีเมล์ */
  <a class="image-button" href="mailto: ใส่อีเมล์"><img alt="อีเมล์" src="ใส่ที่อยู่ภาพไอค่อนอีเมล์" /> </a>
   
/* ไลน์ */  
  <a class="image-button" href="https://ลิงก์ไปไลน์"><img alt="แชทผ่านไลน์" src="ใส่ที่อยู่ภาพไอค่อนไลน์" /></a> 
  
  
</div>
  </body>

กรณีต้องการให้ไอค่อนอยู่ด้านล่าง ให้ใส่ระบุ bottom: 0;

ค้นหาบล็อกนี้

Translate

สัพเพเหระ ตามใจเจ้าของบล็อก (โปรดใช้วิจารณญาณในการรับชม 555)

ทำไอค่อนติดต่อลอยด้านข้าง ด้วยภาพ