41 gratis CSS-knappar med lite JavaScript

Gratis CSS-knappar

Vi fortsätter med en annan artikel i serien HTML, CSS och JavaScript det ger en fin lista över koder att betona med vår webbplats visuella utseende eller användarupplevelse; vare sig det är en e-handel, en målsida eller en blogg i sig.

Rör ögonblicket till ett annat av de viktiga elementen som kan ring uppmaningen så att ikonen som tar användaren till kundvagnen, knapparna, blir köp. CSS-knapparna som du hittar nedan är gratis och består av 3D-knappar, för sociala nätverk, att dela, gå tillbaka till början eller låsa upp liksom andra.

3D-knapp

3D-knapp

En 3D-knapp som sticker ut för det djup det orsakar vart vi än går för att placera den med de skuggningseffekter som gör att alla visuella element sticker ut.

3D-knapp för att trycka på

3D-knapp för att trycka på

detta 3D-knapp i CSS den har förmågan att animationen kommer att börja springa när vi förlänger pulseringen av den.

Tillbakaknapp

Tillbakaknapp

Den här CSS-knappen tar oss till toppen av vår webbplats när vi har gått igenom det.

Bubble-knapp

Bubble-knapp

En bubbla-knapp i CSS och JavaScript som när man klickar på den kommer att plaska med en serie bubblor med en slående och lämplig animation.

Lägg till-knapp

Lägg till-knapp

en graciös animation ger liv åt denna tilläggsknapp i CSS som kan vara ett av de element som gör att vår webbplats sticker ut.

CSS Offset-knapp

Kompensera

Liknande den föregående, även om med en lite annorlunda animation. Det kan vara perfekt för en serie webbplatser med ett visst tema.

Knappstängning

stänga

Vi trycker på detta -knappen i CSS och HTML för att en avslutande animation ska produceras. Enkelt men med stor visuell effekt.

CSS-stängningsknapp

CSS-stängningsknapp

Vid den tiden det låt oss lämna muspekaren På den här stängningsknappen kan vi ta reda på kvalitetsanimationen som vi kommer att integrera på webben.

CSS-nedladdningsknapp

CSS-nedladdningsknapp

Om vi ​​har innehåll att ladda ner på vår webbplats är det viktigt att vi har en lämplig knapp för att användaren ska få rätt snabbt på pulsen. Den här knappen sticker ut när den trycks ned och släpper många små chocker i en väl utförd animation.

Hämta-knappen

Hämta-knappen

Denna knapp är specialiserad på animering för höja en liten boll som kommer att flytta från ena sidan av fältet till den andra för att få oss att markera den åtgärd som användaren vidtar när han klickar på nedladdningen.

Hämta knappanimering

Animering nedladdning

en ganska lång animering för en knapp, men det kan vara den detalj som erbjuder professionalism till din webbplats för nedladdning av alla typer av filer.

Håll muspekaren

Håll muspekaren

Den här knappen väntar på dig lämna muspekaren ovan så att du kan se den enastående animationen som den skapar.

Bullerknapp

Bullerknapp

En annan svävknapp som sticker ut för elektrifierande animering som uppstår när du svävar över pekaren.

Hover-effekt

Hover-effekt

En annan intressant svävareffekt i CSS som sticker ut för sin snabb och smidig animering som ger bra känslor.

Snygg svävareffekt

Hover-stil

En knapp svävar med stor stil i animering för webbplatser med en klassisk touch.

Klibbig effekt

Klibbig effekt

Un enkel och nyfiken effekt vilket ökar storleken på CSS-knappen med lite HTML.

Rand-knapp

Rand-knapp

Stripe är känt för sin bra jobb med UI-designen på din webbplats, den här Stripe-knappen är inspirerad så att du kan ta den till din webbplats.

Tre CSS-knappeffekter

Tre effekter

Tre CSS-effekter i animationen för knappen och att vi kan överväga bra stil.

Gilla Twitter-knappen

Gilla Twitter-knappen

En knapp av likes för Twitter med en gnistrande och energisk animation. Perfekt för dessa sociala mediedagar.

Gilla animationsknappen

Gilla animationsknappen

Här kommer att vara hjärtan de som hoppar av glädje när liknande-knappen trycks in.

Splat-liknande knapp

Splat

En annan mycket nyfiken animation med stor effekt för en liknande knapp för sociala nätverk.

Spela upp-knappen

reproduktion

Spela-knapp som startar hoppa, också av glädje, när du trycker på den.

Uppspelning CSS-knapp

CSS-uppspelning

En animering raderar omkrets kring ikonen Uppspelning av denna CSS-knapp.

Paus / uppspelningsknapp

Uppspelningspaus

Bara en knapp pausa / spela med en minimal touch I designen.

Retro enkel knapp

Retro

Som om vi trycker på knapparna på en spelkontroll från en konsol som XboX.

Rainbow-knapp

Regnbåge

En knapp med en regnbågsanimering som återskapar aviseringarna som kommer till Galaxy S8.

Social knapp

Sociala medier

En låda som öppnas med populära sociala medier ikoner genom att lämna muspekaren på den.

Flytande animation

Flytande animation

En knapp med en kvalitetsanimering det utlöses när vi klickar på det.

3D sociala ikoner

3D sociala ikoner

Un uppmärksammande effekt och det inträffar när vi lämnar pekaren.

Sociala knappar

Sociala knappar

Dessa sociala knappar använder en animering Det ändrar färg från toppen för att skilja sig från resten.

Kubiska sociala knappar

Kubiska sociala knappar

Dessa knappar är ligger i en kub som rör sig perfekt när vi lämnar pekaren på den.

Dela knappar

Dela knappar

Un dela-knappen kännetecknas av en oändlig cyklisk animation.

Dela-knappen för sociala medier i SVG

Dela knappar svg

Klicka bara på delningsknappen och du kommer att finna den gudomliga effekten som förekommer i denna sociala medieknapp.

Kakig delningsknapp

Dela Gooey

Med andra animation «Klibbig», den här knappen är mycket slående för den effekt den ger.

del

del

detta -knappen är uppdelad i fyra olika så att du kan välja det sociala nätverk där du kommer att publicera det direkt delade innehållet.

Knapp för stjärnrecensioner

Knapp för stjärnrecensioner

En knapp sväva som samlar poängen som du ska ge när du lämnar pekaren.

SVG-poängknapp

Poäng SVG-knapp

En annan svävknapp för göra poäng med betyg en produkt eller vad som helst.

Laddningsknapp

Ladda-knapp

Genom att trycka på uppladdningsknappen startar nedladdningsprocessen eller vad som fungerar bäst för din webbplats.

Acceptera-knappen

acceptera knappen

Det är att trycka på det och ett formulär accepteras eller någon annan åtgärd som kräver godkännande från användaren av vår webbplats.

Svep-knappen

Svep

Dedikerad för mobil, den här knappen måste tryckas för att tas åt sidan med den gest som är så typisk i smartphones.

Lås upp gest

Lås upp gest

Un sido gest med finger eller pekare och vi låser upp själva terminalen. En annan perfekt knapp för mobilen.


2 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   nelson sade

    Bra bidrag vän, tack

  2.   Benito Carlos sade

    din sida är lite tung, om du vet mycket om programmering och dessa saker bör du optimera den och inte använda wordpress xc