41 kostenlose CSS-Buttons mit etwas JavaScript

Kostenlose CSS-Schaltflächen

Wir fahren mit einem weiteren Artikel in der Reihe fort HTML, CSS und JavaScript das bringt a schöne Liste von Codes zu betonen das visuelle Erscheinungsbild oder die Benutzererfahrung unserer Website; sei es ein E-Commerce, eine Landing Page oder ein Blog.

Berühren Sie im Moment ein anderes wichtiges Element, zu dem Sie in der Lage sind den Aufruf zum Handeln machen so dass das Symbol, das den Benutzer zum Warenkorb bringt, die Schaltflächen zu Einkäufen werden. Die CSS-Schaltflächen, die Sie unten finden, sind kostenlos und bestehen aus 3D-Schaltflächen, die Sie in sozialen Netzwerken teilen, zum Anfang zurückkehren oder freischalten können.

3D-Taste

3D-Taste

Eine 3D-Schaltfläche, die auffällt für die Tiefe, die es verursacht Überall dort, wo wir es platzieren, mit diesen Schattierungseffekten, die jedes der visuellen Elemente hervorheben.

3D-Taste zum Drücken

3D-Taste zum Drücken

diese 3D-Schaltfläche in CSS Es hat die Fähigkeit, dass die Animation zu laufen beginnt, wenn wir das Pulsieren verlängern.

Zurück-Button

Zurück-Button

Diese CSS-Schaltfläche führt uns an die Spitze unserer Website wenn wir es durchgezogen sind.

Blasentaste

Blasentaste

Eine Bubble-Schaltfläche in CSS und JavaScript, die beim Klicken angezeigt wird wird mit einer Reihe von Blasen spritzen mit einer auffälligen und angemessenen Animation.

Schaltfläche Hinzufügen

Schaltfläche Hinzufügen

Ein anmutige Animation gibt dieser Schaltfläche Leben, um CSS hinzuzufügen, das eines der Elemente sein kann, die unsere Website auszeichnen.

Schaltfläche CSS-Versatz

Offsetdruck

Ähnlich wie beim vorherigen mit einer etwas anderen Animation. Es kann ideal für eine Reihe von Websites zu einem bestimmten Thema sein.

Knopfverschluss

schließen

Wir drücken dies Schaltfläche in CSS und HTML für eine abschließende Animation erstellt werden. Einfach, aber mit großer visueller Wirkung.

CSS-Schaltfläche zum Schließen

CSS-Schaltfläche zum Schließen

Zu der Zeit das Lassen wir den Mauszeiger Auf dieser Schaltfläche zum Schließen können wir die Qualitätsanimation herausfinden, die wir im Web integrieren werden.

CSS-Download-Schaltfläche

CSS-Download-Schaltfläche

Wenn wir Inhalte zum Herunterladen auf unserer Website haben, ist dies wichtig Wir haben einen geeigneten Knopf für den Benutzer, um richtig zu machen schnell am Puls der Zeit. Diese Taste fällt beim Drücken auf und lässt eine Reihe kleiner Schocks in einer gut gemachten Animation fallen.

Download-Button

Download-Button

Diese Schaltfläche ist auf Animation für spezialisiert hebe einen kleinen Ball Dadurch wird eine Seite der Leiste zur anderen verschoben, damit wir die Aktion hervorheben, die der Benutzer beim Klicken auf den Download ausführt.

Button-Animation herunterladen

Animation herunterladen

Ein ziemlich lange Animation für eine SchaltflächeDies kann jedoch das Detail sein, das Ihrer Website Professionalität für das Herunterladen aller Arten von Dateien bietet.

Hover-Taste

Hover-Taste

Dieser Button wartet auf Sie Lass den Mauszeiger oben, damit Sie die herausragende Animation sehen können, die es erstellt.

Rauschtaste

Rauschtaste

Ein weiterer Hover-Button, der auffällt elektrisierende Animation Dies tritt auf, wenn Sie mit der Maus über den Zeiger fahren.

Hover-Effekt

Hover-Effekt

Ein weiterer interessanter Hover-Effekt in CSS, der sich durch seine Eigenschaften auszeichnet schnelle und agile Animation das erzeugt gute Empfindungen.

Stilvoller Schwebeeffekt

Schwebestil

Ein Knopf schwebt mit tollem Stil in der Animation für Websites mit einem klassischen Touch.

Gooey-Effekt

Gooey-Effekt

Un einfacher und merkwürdiger Effekt Dies vergrößert die CSS-Schaltfläche mit etwas HTML.

Streifentaste

Streifentaste

Streifen ist bekannt für seine Tolle Arbeit beim UI-Design Ihrer WebsiteDiese Stripe-Schaltfläche ist inspiriert, damit Sie sie auf Ihre Website übertragen können.

Drei CSS-Tasteneffekte

Drei Effekte

Drei CSS-Effekte in der Animation für die Schaltfläche und dass wir großen Stil betrachten können.

Gefällt mir Twitter-Button

Gefällt mir Twitter-Button

Ein Knopf von Likes für Twitter mit einer funkelnden und energiegeladenen Animation. Perfekt für diese Social Media Tage.

Wie Animationstaste

Wie Animationstaste

hier werden die Herzen sein diejenigen, die vor Freude springen, wenn der Like-Knopf gedrückt wird.

Splat wie Knopf

Splat

Eine andere sehr merkwürdige Animation mit großer Wirkung für einen Like-Button für soziale Netzwerke.

Wiedergabetaste

Fortpflanzung

Wiedergabetaste, die gestartet wird springen, auch aus Freude, wenn gedrückt.

CSS-Taste für die Wiedergabe

CSS-Wiedergabe

Eine Animation löscht das Umfang um das Symbol herum Wiedergabe dieser CSS-Schaltfläche.

Pause / Wiedergabetaste

Wiedergabepause

Nur ein Knopf Pause / Wiedergabe mit minimaler Berührung In dem Design.

Retro einfache Taste

Retro

Als ob wir die drücken würden Tasten auf einem Gamecontroller von einer Konsole wie der XboX.

Regenbogenknopf

Regenbogen

Ein Knopf mit einem Regenbogenanimation Dadurch werden die Benachrichtigungen für das Galaxy S8 neu erstellt.

Soziale Schaltfläche

Social

Eine Schublade, die sich mit öffnet beliebte Social-Media-Symbole von allen, indem Sie den Mauszeiger darauf lassen.

Schwebende Animation

Schwebende Animation

Ein Knopf mit einem Qualitätsanimation Das wird ausgelöst, sobald wir darauf klicken.

3D soziale Symbole

3D soziale Symbole

Un aufmerksamkeitsstarker Effekt und das tritt auf, wenn wir den Zeiger ruhen lassen.

Soziale Schaltflächen

Soziale Schaltflächen

Diese Soziale Schaltflächen verwenden eine Animation Es ändert die Farbe von oben, um sich von den anderen abzuheben.

Kubische soziale Knöpfe

Kubische soziale Knöpfe

Diese Schaltflächen sind befindet sich in einem Würfel das bewegt sich perfekt, wenn wir den Zeiger darauf lassen.

Teilen Sie Schaltflächen

Teilen Sie Schaltflächen

Un Freigabetaste zeichnet sich durch eine unendliche zyklische Animation aus.

Schaltfläche zum Teilen von sozialen Medien in SVG

Teilen Schaltflächen svg

Drücken Sie einfach die Share-Taste und Sie werden die göttliche Wirkung finden das kommt in dieser Social-Media-Schaltfläche vor.

Gooey-Share-Button

Teilen Sie Gooey

Mit anderen Animation «Gooey»Diese Schaltfläche ist sehr auffällig für den Effekt, den sie erzeugt.

Teilen

Teilen

diese Taste ist in vier verschiedene unterteilt Damit können Sie das soziale Netzwerk auswählen, in dem Sie die direkt freigegebenen Inhalte veröffentlichen.

Star Bewertungen Button

Star Bewertungen Button

Ein Knopf Schwebeflug, der die Punktzahl sammelt das wirst du geben, wenn du den Zeiger unten lässt.

SVG Score Button

Ergebnis SVG-Taste

Ein weiterer Hover-Button für Punktzahl mit einer Note ein Produkt oder was auch immer.

Ladetaste

Schaltfläche Laden

Durch Drücken der Die Schaltfläche zum Hochladen startet den Download-Vorgang oder was auch immer am besten für Ihre Website funktioniert.

Schaltfläche "Akzeptieren"

Schaltfläche "Akzeptieren"

Drücken Sie darauf und ein Formular wird akzeptiert oder jede andere Aktion Dies bedarf der Zustimmung des Nutzers unserer Website.

Wischen Sie die Taste

Swipe

Speziell für Handysmuss diese Taste gedrückt werden, um mit der für Smartphones typischen Geste zur Seite gebracht zu werden.

Geste entsperren

Geste entsperren

Un Seitengeste mit Finger oder Zeiger und wir werden das Terminal selbst entsperren. Ein weiterer idealer Knopf für Handys.


Der Inhalt des Artikels entspricht unseren Grundsätzen von redaktionelle Ethik. Um einen Fehler zu melden, klicken Sie auf hier.

2 Kommentare, hinterlasse deine

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * gekennzeichnet

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.

  1.   Nelson sagte

    Toller Beitrag Freund, danke

  2.   Benito Carlos sagte

    Ihre Seite ist etwas schwer, wenn Sie viel über Programmierung und diese Dinge wissen, sollten Sie sie optimieren und kein WordPress xc verwenden