Kichik JavaScript bilan 41 ta bepul CSS tugmasi

Bepul CSS tugmalari

Biz yana bir maqolani davom ettiramiz HTML, CSS va JavaScript olib keladi ta'kidlash kerak bo'lgan yaxshi kodlar ro'yxati veb-saytimizning ingl. ko'rinishi yoki foydalanuvchi tajribasi; elektron tijorat bo'lsin, ochilish sahifasi yoki blogning o'zi.

Qodir bo'lgan muhim elementlardan biriga momentni bosing harakatga chaqiriq qiling Shunday qilib, foydalanuvchini xarid qilish savatiga olib boradigan belgi, tugmalar, xaridlarga aylanadi. Siz quyida topiladigan CSS tugmalari bepul va ular boshqalar uchun almashish, boshiga qaytish yoki qulfini ochish uchun ijtimoiy tarmoqlar uchun 3D tugmachalardan iborat.

3D tugmasi

3D tugmasi

Ajratib turadigan 3D tugma sabab bo'lgan chuqurlik uchun qaerga borsak ham, uni vizual elementlarning har birini ajratib turadigan soyali effektlar bilan joylashtiramiz.

3 tugmani bosing

3 tugmani bosing

este CSS-dagi 3D tugmasi u animatsiyani pulsatsiyasini uzaytirganimizda ishlay boshlaydi.

Orqaga tugmasi

Orqaga tugmasi

Ushbu CSS tugmasi bizni qabul qiladi veb-saytimizning yuqori qismiga biz u orqali harakat qilganimizda.

Bubble tugmasi

Bubble tugmasi

CSS va JavaScript-dagi ko'pik tugmasi bosilganda bir qator pufakchalar bilan sepiladi ajoyib va ​​mos animatsiya bilan.

Qo'shish tugmasi

Qo'shish tugmasi

Una nafis animatsiya CSS-ni qo'shish uchun ushbu tugmani jonlantiradi, bu bizning veb-saytimizni ajratib turadigan elementlardan biri bo'lishi mumkin.

CSS ofset tugmasi

Ofset

Oldiniga o'xshash, garchi biroz boshqacha animatsiya bilan. Bu ma'lum bir mavzu bo'yicha bir qator veb-saytlar uchun ideal bo'lishi mumkin.

Tugmani yopish

yaqin

Biz buni bosamiz CSS va HTML-dagi tugma yakunlovchi animatsiya ishlab chiqarilishi uchun. Oddiy, ammo ajoyib vizual effekt bilan.

CSS-ni yopish tugmasi

CSS-ni yopish tugmasi

O'sha paytda sichqonchani ko'rsatgichini qoldiramiz Ushbu yopish tugmachasida biz Internetda birlashtiradigan sifatli animatsiyani bilib olamiz.

CSS-ni yuklab olish tugmasi

CSS-ni yuklab olish tugmasi

Agar bizning veb-saytimizda yuklab olish uchun tarkib bo'lsa, bu juda muhimdir bizda foydalanuvchi to'g'ri kelishi uchun mos tugma mavjud sizning zarbangizda tezda. Ushbu tugma bosilganda ajralib turadi va yaxshi bajarilgan animatsiyada ko'plab kichik zarbalarni tashlaydi.

Yuklash tugmasi

Yuklash tugmasi

Ushbu tugma uchun animatsiya ixtisoslashgan bir oz to'pni ko'taring Bu satrning bir tomonidan ikkinchisiga o'tib, foydalanuvchini yuklab olishni bosish paytida qilgan harakatini ta'kidlashimizga imkon beradi.

Yuklab olish tugmasi animatsiyasi

Animatsiyani yuklab olish

Una tugma uchun juda uzoq animatsiya, ammo bu barcha turdagi fayllarni yuklab olish uchun veb-saytingizga professionallikni taklif qiladigan tafsilot bo'lishi mumkin.

Hover tugmasi

Hover tugmasi

Ushbu tugma sizni kutmoqda sichqoncha ko'rsatgichini qoldiring yuqorida siz yaratgan ajoyib animatsiyani ko'rishingiz mumkin.

Shovqin tugmasi

Shovqin tugmasi

Ajratib turadigan yana bir hover tugmasi elektrlashtiruvchi animatsiya ko'rsatgich ustida harakatlanayotganda paydo bo'ladi.

Hover effekti

Hover effekti

CSS-da yana bir qiziqarli hover effekti ajralib turadi tezkor va tezkor animatsiya bu yaxshi hislarni keltirib chiqaradi.

Zamonaviy hover effekti

Hover uslubi

Bitta tugmachani suring ajoyib uslub bilan klassik teginishga ega saytlar uchun animatsiyada.

Gooey effekti

Gooey effekti

Un oddiy va qiziquvchan effekt CSS tugmachasi hajmini biroz HTML bilan oshiradi.

Stripe tugmasi

Stripe tugmasi

Stripe taniqli veb-saytingizning interfeysi dizaynida juda yaxshi ish, ushbu Stripe tugmasi sizning veb-saytingizga olib borishingiz uchun ilhomlangan.

Uchta CSS tugmasi effekti

Uch effekt

Uchta CSS effekti tugmachasi uchun animatsiyada va biz ajoyib uslubni ko'rib chiqishimiz mumkin.

Twitter tugmasi kabi

Twitter tugmasi kabi

Tugma Twitter uchun yoqtirishlar yorqin va baquvvat animatsiya bilan. Ushbu ijtimoiy media kunlari uchun juda yaxshi.

Animatsiya tugmasi kabi

Animatsiya tugmasi kabi

Bu erda qalblar bo'ladi shunga o'xshash tugma bosilganda quvonchdan sakraganlar.

Splat like tugmasi

Singan

Boshqa juda ta'sirli juda qiziq animatsiya ijtimoiy tarmoqlar uchun o'xshash tugma uchun.

Tugatish tugmasi

Ko'paytirish

Boshlanadigan "Play" tugmasi sakrash, shuningdek, quvonch uchun, bosilganda.

CSS-ni ijro etish tugmasi

CSS-ni ijro etish

Animatsiya o'chirib tashlaydi piktogramma atrofini Ushbu CSS tugmachasini ijro etish.

To'xtatish / ijro etish tugmasi

Ijro etish pauzasi

Faqat tugma minimal teginish bilan pauza qilish / o'ynash Dizaynda.

Retro oddiy tugma

Retro

Go'yo biz o'yin boshqaruvchisidagi tugmalar XboX kabi konsoldan.

Kamalak tugmasi

Kamalak

Bilan tugma kamalak animatsiyasi Galaxy S8-ga keladigan xabarnomalarni qayta tiklaydi.

Ijtimoiy tugma

ijtimoiy

Ochiladigan tortma mashhur ijtimoiy media ikonkalari sichqonchani ko'rsatgichini qoldirib.

Suzuvchi animatsiya

Suzuvchi animatsiya

Bilan tugma sifatli animatsiya bu biz bosgan paytdan boshlab boshlanadi.

3D ijtimoiy piktogrammalar

3D ijtimoiy piktogrammalar

Un diqqatni jalb qiluvchi ta'sir va biz ko'rsatgichni qo'yganimizda paydo bo'ladi.

Ijtimoiy tugmalar

Ijtimoiy tugmalar

Ular ijtimoiy tugmalar animatsiyadan foydalanadi Qolganlardan ajralib turish uchun rangni yuqoridan o'zgartiradi.

Ijtimoiy tugmachalar

Ijtimoiy tugmachalar

Ushbu tugmalar kub ichida joylashgan biz unga ko'rsatkichni qoldirganimizda mukammal harakat qiladi.

Tugmalarni ulashish

Tugmalarni ulashish

Un ulashish tugmasi cheksiz tsiklik animatsiya bilan ajralib turadi.

SVG-da ijtimoiy media almashish tugmasi

Svg tugmachalarini almashish

Faqat ulanish tugmachasini bosing va ilohiy ta'sirni topasiz ushbu ijtimoiy media tugmachasida sodir bo'ladi.

Gooey bilan bo'lishish tugmasi

Gooey bilan bo'lishing

Boshqasi bilan animatsiya «Gooey», ushbu tugma o'zi yaratadigan effekt uchun juda ajoyib.

ulushi

ulushi

este tugmasi to'rt xilga bo'lingan to'g'ridan-to'g'ri umumiy tarkibni nashr etadigan ijtimoiy tarmoqni tanlashingiz uchun.

Yulduzli sharhlar tugmasi

Yulduzli sharhlar tugmasi

Tugma ball to'playdigan hover Siz ko'rsatgichni qo'yganingizda qoldirmoqchi bo'lganingizda.

SVG ballari tugmasi

SVG tugmasini bosing

Uchrashuv uchun yana bir tugma ball bilan ball mahsulot yoki boshqa narsalar.

Zaryadlash tugmasi

Yuklash tugmasi

Ni bosib yuklash tugmasi yuklab olish jarayonini boshlaydi yoki veb-saytingiz uchun eng yaxshi narsa.

Qabul qilish tugmasi

qabul qilish tugmasi

Uni bosish kerak va shakl qabul qilinadi yoki boshqa har qanday harakat bu bizning veb-saytimiz foydalanuvchisi tomonidan tasdiqlanishi kerak.

Surish tugmasi

surish

Mobil telefonlarga bag'ishlangan, ushbu tugmachani bosib, smartfonlarda odatiy bo'lgan imo-ishora bilan yon tomonga o'tish kerak.

Imo-ishorani oching

Imo-ishorani oching

Un barmoq yoki imo-ishora bilan yon harakati va biz terminalning o'zi qulfini ochamiz. Mobil aloqa uchun yana bir ideal tugma.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

2 ta sharh, o'zingizni qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   Nelson dijo

    Katta hissa do'stim, rahmat

  2.   benito karlos dijo

    sizning sahifangiz biroz og'ir, agar siz dasturlash haqida ko'p narsalarni bilsangiz va uni optimallashtirishingiz kerak va wordpress xc dan foydalanmasangiz