Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada neon tusdagi tugmalar shakllantiramiz. Buning uchun biz CSSning ajoyib uslublaridan foydalanamiz. Albatta, HTMLdan ham)

Maqsad shuki, ushbu tugmalar ustiga kursor olib borilganda neon tusga kiradi. Maqola yanada foydali bo'lishi uchun har bir saytda uchraydigan ijtimoiy tarmoqalarga o'tish tugmachalari misolida qilib ko'ramiz.

Deylik bizda 5 ta ijtimoiy tarmoqlarga o'tkazib yuboruvchi tygmachalar mavjud.

Ijtimoiy tarmoqlar tigmachalari
Ijtimoiy tarmoqlar tigmachalari

 

Biz whatsapp ustiga kursorni olib borsak, u an'anaviy rangi bilon neon tusda yonadi:

Whatsapp neon tusda
Whatsapp neon tusda

 Instagram va boshqa tugmachalar ham an'anaviy ranglarida yonadi:

Instagram neon tusda
Instagram neon tusda

 

Demak, kod yozishni boshladik.

Avvalo, biz html faylda 5ta elementga ega (maqsadga sonini qarab o'zgartiring) bo'lgan raqamlanmagan ro'yxat shakllantirib olamiz. Shu ro'yxatni bir div konteyneriga joylashtiramiz. Har bir li uchun men <i></i> , elementlaridan foydalandim. Bu teglar ijtimoiy tarmoqlar ikonkasini o'z ichiga oladi. Ish oson bo'lishi uchun men maxsus ikonlar saytidan foydalandim. Siz shunchagi svg rasmdan foydalanishingiz mumkin. Birinchilikda turgan link va i elementi ichidagi "fa fa- ..." aynan shu ikonlar saytiga aloqador, bu nima ekan deb xayron bo'lmasligingizni so'rab qolaman. 

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">;
<div class="container">
  <ul class="social">
    <li class="social__item whatsapp">
      <i class="fa fa-whatsapp"></i>
    </li>
    <li class="social__item vk">
      <i class="fa fa-vk"></i>
    </li>
    <li class="social__item twitter">
      <i class="fa fa-twitter"></i>
    </li>
    <li class="social__item instagram">
      <i class="fa fa-instagram"></i>
      
    </li>
    <li class="social__item google">
      <i class="fa fa-google"></i>
      
    </li>
  </ul>
</div>

 

Endi esa css faylni shakllantiramiz:

Birinchi galda sahifaga tegishli umumiy uslublarni sozlab olamiz. So'ngra .containerimizning uslaublarini o'zimizga moslab olamiz. Undan keyin social klasli ro'yxatimizni markerlarsiz holga keltirib, dizaynini sozlab olamiz. 5ta ro'yxat elementi uchun umumiy bo'lgan social__item klasi uchun shakl, rang va ramka qalinligini kiritamiz. Eng e'tiborlisi transition xossasini kiritish va tegishli vaqtni belgilash. Chunki elementning neon tusga kirishi biror bir qisqa vaqt ichida sodir bo'lishi yana go'zallik kasb etadi.

Yana o'sha siz bilan o'rgan o'sha :hover psevdoklasidan foydalanamiz. Chunki neon tusni olish faqatgina kursor element chegarasiga kirganda hosil bo'ladi.

Har bir ijtimoiy tarmoq uchun lida berilgan klas uchun border-color: ;  box-shadow: ;
  color:; xossalari, ya'ni rangning o;zgarishi va neonlik tusining xosil bo'lishi qiymatlari kiritiladi. Ushbu holatda har bir ikon uchun o'ziga xos rang.
 

CSS:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.container {
  height: 100vh;
  background-color: #363636;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social {
  color: #fff;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-between;
  width: 450px;
}
.social__item {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: all 0.3s;
}
.social__item {
  cursor: pointer;
}
.whatsapp:hover {
  border-color: #4dc247;
  box-shadow: 0px 0px 20px #4dc247;
  color: #4dc247;
}
.vk:hover {
  border-color: #00aced;
  box-shadow: 0px 0px 20px #00aced;
  color: #00aced;
}
.twitter:hover {
  border-color: #3D5AFE;
  box-shadow: 0px 0px 20px #3D5AFE;
  color: #3D5AFE;
}
.instagram:hover {
  border-color: #bc2a8d;
  box-shadow: 0px 0px 20px #bc2a8d;
  color: #bc2a8d;
}
.google:hover {
  border-color: #dd4b39;
  box-shadow: 0px 0px 20px #dd4b39;
  color: #dd4b39;
}

 

Endi esa natijani ko'ramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!