ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ: ਸਮਾਜਿਕ ਮੀਡੀਆ ਬਟਨ

ਸਮਾਜਿਕ ਮੀਡੀਆ ਬਟਨ ਦੇ ਸਟਾਇਲ ਨਾਲ ਕਿਵੇਂ ਡਿਜ਼ਾਇਨ ਕਰਨਾ ਹੈ

ਕਦਮ 1 - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<!-- ਆਇਕਨ ਲਾਇਬ੍ਰੇਰੀ ਜੋੜੋ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ਫੌਂਟ ਅਵੇਰ ਆਇਕਨ ਜੋੜੋ -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

ਕਦਮ 2 - ਸਕਸ਼ਨ ਜੋੜੋ CSS:

ਚੌਕਰ ਉਦਾਹਰਣ

/* ਸਾਰੇ Font Awesome ਆਇਕਨਾਂ ਲਈ ਸਟਾਇਲ ਸੈਟ ਕਰੋ */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* ਜੇਕਰ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਤਾਂ ਹੋਵੇਗਾ ਹੋਵੇ */
.fa:hover {
  opacity: 0.7;
}
/* ਹਰ ਬ੍ਰਾਂਡ ਲਈ ਵਿਸ਼ੇਸ਼ ਰੰਗ ਸੈਟ ਕਰੋ */
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

亲自试一试

ਗੋਲ ਬਟਨ

ਸੁਝਾਅ:ਜੋੜੋ border-radius:50% ਗੋਲ ਬਟਨ ਬਣਾਉਣ ਲਈ ਅਤੇ ਬੋਰਡਰ-ਰੈਡੀਅਸ: 50% ਨੂੰ ਘਟਾਓ width:

ਗੋਲ ਰੌਗਣਦਾਰ

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

亲自试一试

相关按钮

教程：图标

教程：CSS 按钮