சிறிய ஜாவாஸ்கிரிப்ட் கொண்ட 41 இலவச CSS பொத்தான்கள்

இலவச CSS பொத்தான்கள்

தொடரின் மற்றொரு கட்டுரையுடன் தொடர்கிறோம் HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் அது ஒரு கொண்டு வருகிறது வலியுறுத்த முக்கிய குறியீடுகளின் பட்டியல் எங்கள் வலைத்தளத்தின் காட்சி தோற்றம் அல்லது பயனர் அனுபவம்; அது ஒரு இணையவழி, ஒரு லேண்டிங் பக்கம் அல்லது ஒரு வலைப்பதிவாக இருக்கலாம்.

அந்த முக்கியமான உறுப்புகளில் இன்னொருவருக்கு இது தருணத்தைத் தொடுகிறது நடவடிக்கைக்கு அழைப்பு விடுங்கள் இதனால் பயனரை வணிக வண்டிக்கு அழைத்துச் செல்லும் ஐகான், பொத்தான்கள் வாங்குதல்களாக மாறும். நீங்கள் கீழே காணும் CSS பொத்தான்கள் இலவசம் மற்றும் 3D பொத்தான்களைக் கொண்டுள்ளன, சமூக வலைப்பின்னல்களுக்கு, பகிர, தொடக்கத்திற்குச் செல்ல அல்லது திறக்க மற்றும் பிறவற்றைத் திறக்க.

குறியீட்டு

3D பொத்தான்

3D பொத்தான்

ஒரு 3D பொத்தான் தனித்து நிற்கிறது அது ஏற்படுத்தும் ஆழத்திற்கு நாம் எங்கு சென்றாலும் அந்த நிழல் விளைவுகளுடன் அதை வைக்க ஒவ்வொரு காட்சி கூறுகளும் தனித்து நிற்கின்றன.

3D பொத்தானை அழுத்தவும்

3D பொத்தானை அழுத்தவும்

அது CSS இல் 3D பொத்தான் அனிமேஷன் அதன் துடிப்பை நாம் நீட்டிக்கும்போது இயங்கத் தொடங்கும் திறன் இதற்கு உள்ளது.

பின் பொத்தான்

பின் பொத்தான்

இந்த CSS பொத்தான் நம்மை அழைத்துச் செல்லும் எங்கள் வலைத்தளத்தின் மேலே நாம் அதை நகர்த்தும்போது.

குமிழி பொத்தான்

குமிழி பொத்தான்

CSS மற்றும் ஜாவாஸ்கிரிப்டில் ஒரு குமிழி பொத்தான் சொடுக்கும் போது தொடர்ச்சியான குமிழ்கள் மூலம் தெறிக்கும் வேலைநிறுத்தம் மற்றும் பொருத்தமான அனிமேஷனுடன்.

பொத்தானைச் சேர்

பொத்தானைச் சேர்

ஒரு அழகான அனிமேஷன் CSS இல் சேர்க்க இந்த பொத்தானை உயிர்ப்பிக்கிறது, இது எங்கள் வலைத்தளத்தை தனித்துவமாக்கும் உறுப்புகளில் ஒன்றாகும்.

CSS ஆஃப்செட் பொத்தான்

பெயர்ச்சி

முந்தையதைப் போலவே சற்று வித்தியாசமான அனிமேஷனுடன். இது ஒரு குறிப்பிட்ட கருப்பொருளில் தொடர்ச்சியான வலைத்தளங்களுக்கு ஏற்றதாக இருக்கும்.

பொத்தான் மூடல்

நெருங்கிய

இதை அழுத்துகிறோம் CSS மற்றும் HTML இல் பொத்தானை அழுத்தவும் ஒரு இறுதி அனிமேஷன் தயாரிக்க. எளிமையானது, ஆனால் சிறந்த காட்சி விளைவுடன்.

CSS மூடு பொத்தான்

CSS மூடு பொத்தான்

அந்த நேரத்தில் சுட்டி சுட்டிக்காட்டி விடலாம் இந்த நெருங்கிய பொத்தானில், வலையில் நாம் ஒருங்கிணைக்கும் தரமான அனிமேஷனைக் காணலாம்.

CSS பதிவிறக்க பொத்தான்

CSS பதிவிறக்க பொத்தான்

எங்கள் இணையதளத்தில் பதிவிறக்கம் செய்ய உள்ளடக்கம் இருந்தால், அது முக்கியம் பயனருக்கு சரியானதைப் பெற பொருத்தமான பொத்தானை வைத்திருப்போம் உங்கள் துடிப்பில் விரைவாக. இந்த பொத்தானை அழுத்தும் போது தனித்து நிற்கிறது மற்றும் நன்கு செயல்படுத்தப்பட்ட அனிமேஷனில் நிறைய சிறிய அதிர்ச்சிகளைக் குறைக்கிறது.

பதிவிறக்க பொத்தானை அழுத்தவும்

பதிவிறக்க பொத்தானை அழுத்தவும்

இந்த பொத்தான் அனிமேஷனில் நிபுணத்துவம் பெற்றது ஒரு சிறிய பந்தை உயர்த்தவும் பதிவிறக்கத்தைக் கிளிக் செய்யும் போது பயனர் எடுக்கும் செயலை முன்னிலைப்படுத்த இது பட்டியின் ஒரு பக்கத்திலிருந்து மற்றொன்றுக்கு நகரும்.

பொத்தான் அனிமேஷனைப் பதிவிறக்குக

அனிமேஷன் பதிவிறக்கம்

ஒரு ஒரு பொத்தானை மிக நீண்ட அனிமேஷன், ஆனால் அது உங்கள் வலைத்தளத்திற்கு அனைத்து வகையான கோப்புகளையும் பதிவிறக்குவதற்கு நிபுணத்துவத்தை வழங்கும் விவரமாக இருக்கலாம்.

பொத்தான் பொத்தான்

பொத்தான் பொத்தான்

இந்த பொத்தான் உங்களுக்காக காத்திருக்கிறது சுட்டி சுட்டிக்காட்டி விட்டு மேலே நீங்கள் உருவாக்கும் சிறந்த அனிமேஷனைக் காணலாம்.

சத்தம் பொத்தான்

சத்தம் பொத்தான்

மற்றொரு ஹோவர் பொத்தான் மின்மயமாக்கல் அனிமேஷன் சுட்டிக்காட்டி மீது வட்டமிடும் போது அது நிகழ்கிறது.

ஹோவர் விளைவு

ஹோவர் விளைவு

CSS இல் மற்றொரு சுவாரஸ்யமான மிதவை விளைவு வேகமான மற்றும் சுறுசுறுப்பான அனிமேஷன் இது நல்ல உணர்வுகளை உருவாக்குகிறது.

ஸ்டைலான ஹோவர் விளைவு

ஹோவர் பாணி

ஒரு பொத்தான் மிதவை சிறந்த பாணியுடன் உன்னதமான தொடுதலுக்கான தளங்களுக்கான அனிமேஷனில்.

கூய் விளைவு

கூய் விளைவு

Un எளிய மற்றும் ஆர்வமான விளைவு இது ஒரு பிட் HTML உடன் CSS பொத்தானின் அளவை அதிகரிக்கிறது.

கோடு பொத்தான்

கோடு பொத்தான்

கோடு அதன் பெயரால் அறியப்படுகிறது உங்கள் வலைத்தளத்தின் UI வடிவமைப்பில் சிறந்த வேலை, இந்த ஸ்ட்ரைப் பொத்தான் ஈர்க்கப்பட்டு, அதை உங்கள் வலைத்தளத்திற்கு எடுத்துச் செல்லலாம்.

மூன்று CSS பொத்தான் விளைவுகள்

மூன்று விளைவுகள்

மூன்று CSS விளைவுகள் பொத்தானுக்கான அனிமேஷனில் மற்றும் சிறந்த பாணியை நாம் கருத்தில் கொள்ளலாம்.

ட்விட்டர் பொத்தானைப் போல

ட்விட்டர் பொத்தானைப் போல

ஒரு பொத்தான் ட்விட்டருக்கான விருப்பங்கள் ஒரு பிரகாசமான மற்றும் ஆற்றல் வாய்ந்த அனிமேஷனுடன். இந்த சமூக ஊடக நாட்களில் சரியானது.

அனிமேஷன் பொத்தானைப் போல

அனிமேஷன் பொத்தானைப் போல

இங்கே இதயங்களாக இருக்கும் போன்ற பொத்தானை அழுத்தும்போது மகிழ்ச்சிக்காக குதிப்பவர்கள்.

பொத்தானைப் போன்றது

ஸ்ப்ளாட்

மற்றொரு மிகவும் ஆர்வமுள்ள அனிமேஷன் சமூக வலைப்பின்னல்களுக்கு ஒரு போன்ற பொத்தானை.

பொத்தானை இயக்கு

இனப்பெருக்கம்

தொடங்கும் பொத்தானை இயக்கு குதித்து, மகிழ்ச்சிக்காகவும், அழுத்தும் போது.

பின்னணி CSS பொத்தான்

CSS பின்னணி

ஒரு அனிமேஷன் அழிக்கும் ஐகானைச் சுற்றியுள்ள சுற்றளவு இந்த CSS பொத்தானின் பின்னணி.

இடைநிறுத்தம் / இயக்கு பொத்தானை

பின்னணி இடைநிறுத்தம்

ஒரு பொத்தான் இடைநிறுத்தம் / குறைந்த தொடுதலுடன் விளையாடுங்கள் வடிவமைப்பில்.

ரெட்ரோ எளிய பொத்தான்

ரெட்ரோ

நாங்கள் அழுத்துவதைப் போல விளையாட்டு கட்டுப்படுத்தியின் பொத்தான்கள் XboX போன்ற கன்சோலில் இருந்து.

ரெயின்போ பொத்தான்

வானவில்

ஒரு பொத்தானை ஒரு ரெயின்போ அனிமேஷன் இது கேலக்ஸி எஸ் 8 க்கு வரும் அறிவிப்புகளை மீண்டும் உருவாக்குகிறது.

சமூக பொத்தான்

சமூக

திறக்கும் ஒரு அலமாரியை பிரபலமான சமூக ஊடக சின்னங்கள் எல்லாவற்றிற்கும் மேலாக மவுஸ் சுட்டிக்காட்டி விட்டு.

மிதக்கும் அனிமேஷன்

மிதக்கும் அனிமேஷன்

ஒரு பொத்தானை ஒரு தரமான அனிமேஷன் நாம் அதைக் கிளிக் செய்யும் தருணத்தில் அது தூண்டப்படுகிறது.

3D சமூக சின்னங்கள்

3D சமூக சின்னங்கள்

Un கவனத்தை ஈர்க்கும் விளைவு நாம் சுட்டிக்காட்டி ஓய்வெடுக்கும்போது அது நிகழ்கிறது.

சமூக பொத்தான்கள்

சமூக பொத்தான்கள்

இந்த சமூக பொத்தான்கள் அனிமேஷனைப் பயன்படுத்துகின்றன இது மற்றவர்களிடமிருந்து தன்னை வேறுபடுத்துவதற்கு மேலே இருந்து நிறத்தை மாற்றுகிறது.

கன சமூக பொத்தான்கள்

கன சமூக பொத்தான்கள்

இந்த பொத்தான்கள் உள்ளன ஒரு கனசதுரத்தில் அமைந்துள்ளது நாம் அதை சுட்டிக்காட்டி விட்டு வெளியேறும்போது அது சரியாக நகரும்.

பொத்தான்களைப் பகிரவும்

பொத்தான்களைப் பகிரவும்

Un பகிர் பொத்தான் எல்லையற்ற சுழற்சி அனிமேஷனால் வேறுபடுகிறது.

எஸ்.வி.ஜி-யில் சமூக ஊடக பகிர் பொத்தான்

பகிர் பொத்தான்கள் svg

பகிர் பொத்தானை அழுத்தவும் நீங்கள் தெய்வீக விளைவைக் காண்பீர்கள் இந்த சமூக ஊடக பொத்தானில் நிகழ்கிறது.

கூய் பகிர் பொத்தான்

கூயைப் பகிரவும்

மற்றவற்றுடன் அனிமேஷன் «கூய்», இந்த பொத்தானை அது உருவாக்கும் விளைவுக்கு மிகவும் வியக்க வைக்கிறது.

பங்கு

பங்கு

அது பொத்தான் நான்கு வெவ்வேறு பிரிக்கப்பட்டுள்ளது இதன் மூலம் நீங்கள் நேரடியாக பகிரப்பட்ட உள்ளடக்கத்தை வெளியிடும் சமூக வலைப்பின்னலை தேர்வு செய்யலாம்.

நட்சத்திர மதிப்புரைகள் பொத்தான்

நட்சத்திர மதிப்புரைகள் பொத்தான்

ஒரு பொத்தான் மதிப்பெண் சேகரிக்கும் மிதவை சுட்டிக்காட்டி காட்டும்போது நீங்கள் கொடுக்கப் போகிறீர்கள்.

எஸ்.வி.ஜி ஸ்கோர் பட்டன்

ஸ்கோர் எஸ்.வி.ஜி பொத்தான்

மற்றொரு ஹோவர் பொத்தான் ஒரு தரத்துடன் மதிப்பெண் ஒரு தயாரிப்பு அல்லது எதுவாக இருந்தாலும்.

சார்ஜ் பொத்தான்

ஏற்ற பொத்தானை அழுத்தவும்

அழுத்துவதன் மூலம் பதிவேற்ற பொத்தானை பதிவிறக்கும் செயல்முறையைத் தொடங்கும் அல்லது உங்கள் வலைத்தளத்திற்கு எது சிறந்தது.

பொத்தானை ஏற்றுக்கொள்

ஏற்றுக்கொள் பொத்தான்

அதைக் கிளிக் செய்து, ஒரு படிவம் ஏற்றுக்கொள்ளப்படும் அல்லது வேறு எந்த செயலும் அதற்கு எங்கள் வலைத்தளத்தின் பயனரின் ஒப்புதல் தேவை.

ஸ்வைப் பொத்தான்

ஸ்வைப்

மொபைலுக்காக அர்ப்பணிக்கப்பட்டது, ஸ்மார்ட்போன்களில் மிகவும் பொதுவான அந்த சைகை மூலம் இந்த பொத்தானை அழுத்த வேண்டும்.

சைகை திறக்க

சைகை திறக்க

Un விரல் அல்லது சுட்டிக்காட்டி மூலம் பக்க சைகை நாங்கள் முனையத்தைத் திறப்போம். மொபைலுக்கான மற்றொரு சிறந்த பொத்தான்.


கட்டுரையின் உள்ளடக்கம் எங்கள் கொள்கைகளை பின்பற்றுகிறது தலையங்க நெறிமுறைகள். பிழையைப் புகாரளிக்க கிளிக் செய்க இங்கே.

2 கருத்துகள், உங்களுடையதை விடுங்கள்

உங்கள் கருத்தை தெரிவிக்கவும்

உங்கள் மின்னஞ்சல் முகவரி வெளியிடப்பட்ட முடியாது.

*

*

  1. தரவுக்கு பொறுப்பு: மிகுவல் ஏஞ்சல் கேடன்
  2. தரவின் நோக்கம்: கட்டுப்பாட்டு ஸ்பேம், கருத்து மேலாண்மை.
  3. சட்டபூர்வமாக்கல்: உங்கள் ஒப்புதல்
  4. தரவின் தொடர்பு: சட்டபூர்வமான கடமையால் தவிர மூன்றாம் தரப்பினருக்கு தரவு தெரிவிக்கப்படாது.
  5. தரவு சேமிப்பு: ஆக்சென்டஸ் நெட்வொர்க்குகள் (EU) வழங்கிய தரவுத்தளம்
  6. உரிமைகள்: எந்த நேரத்திலும் உங்கள் தகவல்களை நீங்கள் கட்டுப்படுத்தலாம், மீட்டெடுக்கலாம் மற்றும் நீக்கலாம்.

  1.   நெல்சன் அவர் கூறினார்

    சிறந்த பங்களிப்பு நண்பரே, நன்றி

  2.   பெனிட்டோ கார்லோஸ் அவர் கூறினார்

    உங்கள் பக்கம் சற்று கனமானது, நிரலாக்கத்தைப் பற்றியும் இந்த விஷயங்களைப் பற்றியும் உங்களுக்கு நிறைய தெரிந்தால் நீங்கள் அதை மேம்படுத்த வேண்டும் மற்றும் வேர்ட்பிரஸ் xc ஐப் பயன்படுத்தக்கூடாது