Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada neon tusga kiruvchi tugmacha shakllantirib, kontentni yanada chiroyli qilamiz. Buning uchun biz CSSning ajoyib uslublaridan va  HTMLdan foydalanamiz.

Ushbu shakllantirmoqchi bo'lgan tugmachamiz hududiga kursor olib kirilganda, tugmacha chetlaridan gradientga ega bo'lgan chiziqlar o'tadi va tugmachaning o'zi neon tusga kiradi.

Neon tusga ega tugmacha
Neon tusga ega tugmacha

Endi esa kodga o'tamiz:

 

Avvalo biz <a></a> elementi orqali havola shakllantirib olamiz. href atributida tugmachani bosganda o'tilishi kerak bo'lgan manzil ko'rsatiladi. Havola klasini, eslashga oson bo'lishi uchun ''button'' deb belgilaymiz.  Havolaning ichida 4ta span elementi shakllantiramiz. Ularga bir vaqtning o'zida har biriga 2tadan klas beramiz.2 klasga tugmachamiz chetida aylanuvchi neon chiziqlar uchun top, right, bottom va left deb ataluvchi modifikator biriktiramiz.

HTML:

<a href="#" class="button">
  <span class="button__line button__line--top"></span>
  <span class="button__line button__line--right"></span>
  <span class="button__line button__line--bottom"></span>
  <span class="button__line button__line--left"></span>
  Neon button
</a>

 

Keyin esa body uchun umumiy uslublarni beramiz.  

Button uchun position: relative; pozitsiyalanishini beramiz.Havola tugmacha shaklida boʻlishi uchun padding xossasidan foydalanamiz. Matn rangi va orqa fon ranglarini kiritamiz. Shrift turini oʻzimizga moslab olamiz.  

Eng muhim jihatidan biri shuki, overflow xossasiga hidden, yaʼni yashirilgan qiymatini beramiz. Bu shuni anglatadiki, havola tashqarisida mavjud boʻluvchi elementlar koʻrinmaydigan boʻlib qoladi. Va neon effektga oʻtish jarayoni koʻzga tashlanishi uchun transition xossasiga 0.2 sekundni kiritamiz.

button__line klasi uchun positsiyani absolyut holda kiritamiz. Koʻrinishni esa blok holatida qilib qoʻyamiz.

CSS:

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Consolas;
  background-color: #333;
}

.button {
  position: relative;
  display: inline-block;
padding: 15px 30px;
  color: #2196f3;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 4px;
  overflow: hidden;
  background-color: rgba(0,0,0,0.2);
  transition: 0.2s;
}
.button__line {
  position: absolute;
  display: block;
}
.button__line--top {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2196f3);
}
.button:hover .button__line--top {
  left: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}
.button__line--bottom {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #2196f3);
}
.button:hover .button__line--bottom {
  right: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}
.button__line--left {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(0deg, transparent, #2196f3);
}
.button:hover .button__line--left {
  bottom: 100%;
  transition: 1s;
  transition-delay: 0s;
}
.button__line--right {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #2196f3);
}
.button:hover .button__line--right {
  top: 100%;
  transition: 1s;
  transition-delay: 0s;
}
.button:hover {
  box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
  background-color: #2196f3;
  color: #333;
  transition-delay: 1s;
}

Modifikator bilan yozilgan ikkinchi klaslarimizga ham uslub yozamiz.

Birinchi galda top, yaʼni tugmachaning yuqori qismidan oʻtadigan, gradient tusga ega boʻlgan harakatlanuvchi chiziqni shakllantiramiz. Chiziqning qalinligini 2px, kengligini 100% va rangini oʻzimizga mos qilib olamiz. Joylashuvini esa havoladan chap tarafga chiqarib qoʻyamiz. Keyin esa :hover psevdoklasi yordami harakatga keltiramiz. Left xossasini 100%ga yozish orqali chiziqni havola ustiga keltiramiz. Transition yordamida chiziq harakatini koʻrish imkoniga ega boʻlamiz. Transition-delay yordamida ushlanib turish vaqtini beramiz. Bu ham effektga yana chiroy qoʻshadi.

Qolgan 3 ta modifikatorli klaslar uchun ham joylashuviga qarab xuddi shu uslublarni takrorlaymiz.Soʻngra button klasining oʻziga :hover psevdoklasi yordamida effekt beramiz. Qachonki kursor hududga kirganda tugmacha biz kiritgan neon effekti rangida yonadi.

Endi esa natijani koʻramiz:

Natija!
Natija!

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!