Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada yarqirashga ega 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 ustidan nur o'tadi va u yarqiraydi.

Tugmachaning yarqirashi
Tugmachaning yarqirashi

Demak, ishga kirishamiz: 

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. 

HTML:

<div class="container">
  <a href="#" class="button">Tugmacha</a>
</div>

 

Endi navbat CSS ga!

Ushbu effekt uchun biz Sass preprotsessoridan foydalanamiz. 

Avvalo body uchun va havolani o'rab turuvchi obyektlar uchun umumiy xossalarni yozamiz. Endi esa .button klasi uchun xossalar yozamiz. Avvalo pozitsiyalanishni relative qilib olamiz. Ko'rinishini qatorli-blokli holga keltiramiz, chunki havolaga padding xossasini yozib tugmacha ko'rinishiga keltirish zarur. So'ngra padding: 10px 20px yordamida havolani tugmacha ko'rinishiga keltiramiz. text-decoration: none yordamida havola matni pastki chizig'ini o'chiramiz, orqa fon rangi va matn rangini kiritamiz. overflow: hidden yordamida havola chegarasidan tashqaridagi obyektlarning qismlarini o'chirish xossasini kiritamiz.

So'ngra, biz yaxshi bilgan :before psevdoelementi yordamida yarqirash effektini kiritamiz. Yarqirash effekti hosil bo'lishi uchun bizga rangi oq, shaffofroq tusga ega bo'lgan, biroz kenglikka ega bo'lgan obyektning tugmacha ustidan o'tib ketishi kerak. Demak obyektni shakllantirib olamiz. Buning uchun uning qalinligini 1.5em, kengligini esa tugmacha kengligi bilan bir xil qilib, 100% qilib olamiz.   transform: translateX(-4em) skewX(-45deg) yordamida obyektni X o'qi bo'yicha buramiz va tugmacha chegarasidan chiqarib turamiz, bu holda u ko'rinmay turadi. 

Endi esa :hover psevdoklasi yordamida animatsiya bo'lish kerakligini, ya'ni kursor tugmacha hududiga kiritilganda o'sha yarqirash effekti hosil bo'lishini kiritamiz. Yarqirash vaqtini kiritamiz.

CSS:

body 
  font-family: sans-serif
  background-color: #E0E0E0
.container 
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
.button 
  position: relative
  display: inline-block
  text-decoration: none
  background-color: #0277BD
  color: #fff
  padding: 10px 20px
  border-radius: 5px
  overflow: hidden
  &:before 
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 1.5em
    height: 100%
    background-color: rgba(#fff, 0.6)
    transform: translateX(-4em) skewX(-45deg)
  &:hover 
    &:before 
      animation: move-light 0.7s 
      
@keyframes move-light
  from 
    transform: translateX(-4em) skewX(-45deg)
  to 
    transform: translateX(10em) skewX(-45deg)

Animatsiya hosil qilish uchun @keyframes derektividan foydalanamiz.  from  va  to yordamida yarqirash obyekti chapdan o'ngga o'tishi kerakligi ekanligi kiritiladi.

Endi esa natijani yana bir bor ko'ramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!