BriskButton für Websites - jQuery Plugin

Der innovative Button für mehr Benutzerfreundlichkeit

BriskButton jQuery Plugin für Websites

Vorschau zu diesem Artikel

Keine Online Demo zu diesem Artikel verfügbar

Vorschau zu diesem Artikel

Reguläre
Lizenz

0,00 €

Kostenloser Download
(Kommerziell und persönlich)

Download

Kostenloser Download

Dieser Download wird Ihnen absolut kostenlos von SOYOS Online Solutions zur Verfügung gestellt.

Free Download

BriskButton für Websites – was ist das?

Ein BriskButton für Websites unterscheidet sich auf den ersten Blick nicht von einem regulären Button. Fährt man über den Button mit der Maus, bläht sich der Button auf die gewünschte Größe auf und blendet Ihren individuellen HTML/CSS -Inhalt ein. Die Übergänge sind animiert und bieten ein angenehmes Look&Feel.

Sinnvoll eingesetzt kann man mittels BriskButtons die Benutzerfreundlichkeit von Websites erheblich erhöhen. BriskButton ist ein innovatives UI-Element für Websites und wurde von SOYOS Online Solutions entwickelt.

Welche Vorteile und Möglichkeiten bietet der BriskButton für Websites?

Einsatzmöglichkeiten für BriskButtons gibt es viele. Anbei ein paar Beispiele, wie man mittels BriskButtons die Benutzerfreundlichkeit erhöhen oder auch die Conversion-Rate steigern kann mittels z.B. besonderer Angebote, die dem Interessenten direkt ins Auge fallen.

  • Download-Button
    Bieten Sie mehrere Versionen zum Herunterladen Ihres Produkts an, so können Sie diese alle innerhalb des BriskButtons darstellen, denn Sie selbst definieren die Maximalgröße des Buttons und können den Inhalt selbst bestimmen. So können Sie z.B. mehrere Versionen oder Versionen für unterschiedliche Betriebssysteme innerhalb eines einzigen BriskButtons anbieten ohne auf der Website selbst eine Fülle von Download-Buttons darzustellen. So bleibt der Platz auf Ihrer Website primär für Ihre Produktbeschreibung. Der Download-Button wird direkt erkannt und bietet dann die entsprechenden Informationen und Links an, die an dieser Stelle erst benötigt werden.  
  • Download-Button in Verbindung mit einem attraktiven Angebot
    Eine weitere Möglichkeit besteht darin innerhalb des BriskButtons den Download z.B. einer Testversion anzubieten und gleichzeitig auf ein besonderes günstiges Angebot mit direkter Kaufmöglichkeit hinzuweisen.  Der Interessent, der primär an einem Download interessiert ist, richtet seine volle Aufmerksamkeit auf den Download Button und nimmt so das besondere Angebot bewusst wahr.
  • Individuelle Einsatzmöglichkeiten
    BriskButton eignet sich auch überall, wo mehrere Buttons oder Links mit wichtigen Hinweisen das Design einer Website unnötig stören würden. Informationen werden durch Verwendung eines BriskButtons erst bei Bedarf für den Websitebesucher eingeblendet. Der Inhalt kann vollständig per HTML/CSS definiert werden. Somit sind die Einsatzmöglichkeiten sehr vielfältig und bieten, sinnvoll eingesetzt, erhöhte Benutzerfreundlichkeit.

Online Demo

Individuelle Beschriftung der BriskButtons

BriskButtons (jQuery Plugin) können alle individuell konfiguriert werden. Egal ob Sie die Beschriftung einzeilig, zweizeilig, mit oder ohne Icon, mit oder ohne Bild oder speziell formatiert wünschen.

Unterschiedliche Styles

BriskButton jQuery Plugin bietet vordefinierte Styles wie Classic Blue, Classic Green, Classic Orange oder den Aero Style an. Darüber hinaus kann man mittels der mitgelieferten Photoshop-Vorlage ganz eigene individuelle Styles kreieren.

Individuelle Größen der BriskButtons (minimiert und maximiert)

Definieren Sie selbst, welche Größe jeder BriskButton minimiert und maximiert hat. Die Grafiken werden dabei so skaliert, dass kein Qualitätsverlust entsteht und selbst feinste Effekte erhalten bleiben.

30 unterschiedliche Animationseffekte

Wählen Sie einen von 30 unterschiedlichen Animationseffekten aus und definieren Sie selbst die Dauer der Animation. Soll Ihr BriskButton schnell aufgehen, langsam aufgehen, mit oder ohne besonderem Effekt? Testen Sie doch einmal die hier hinterlegten unterschiedlichen Animationseffekte:

Individueller Inhalt der maximierten BriskButtons

Wie oben im Beschreibungstext erklärt, gibt es zahlreiche Anwendungsmöglichkeiten für den BriskButton. Inhalte für den Status des maximierten BriskButtons können Sie selbst per HTML/CSS völlig frei definieren.

Integration & Konfiguration

Folgende Dateien müssen in der HEAD-Bereich der Website eingebunden werden, um das Plugin verwenden zu können:

  1. <link href="css/BriskButton.css" rel="stylesheet" type="text/css"/>
  2. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  4. <script type="text/javascript" src="js/jquery-BriskButton.js"></script>

Button erstellen

Sie möchten ein DIV-Element mit der ID "MeinInhalt" in einem BriskButton darstellen. Der BriskButton soll relativ zu dem Element mit der ID "NachArtikel" positioniert wereden. Verwenden Sie folgenden Code:

  1. <script type="text/javascript">
  2.     $.fn.BriskButton({
  3.         BriskButtonSourceID:            'MeinInhalt',       /* ID of the Source Element */
  4.         BriskButtonPlacementID:         'NachArtikel',      /* ID of the Placement Element (RELATIVE POSITIONING), blank for ABOSLUTE POSITIONING */
  5.         BriskButtonCaption:             'More Information',/* Some Text/HTML for the Caption Area */
  6.         BriskButtonPositionTop:         100,                /* pixels */
  7.         BriskButtonPositionLeft:        100                 /* pixels */
  8.     });
  9. </script>

 

Sie können jeden BriskButton individuell konfigurieren. Für nicht angegebene Konfigurationsparameter werden später die Default-Werte verwendet:

  1. <script type="text/javascript">
  2.     $.fn.BriskButton({
  3.         BriskButtonSourceID:            '',                 /* ID of the Source Element */
  4.         BriskButtonPlacementID:         '',                 /* ID of the Placement Element (RELATIVE POSITIONING), blank for ABOSLUTE POSITIONING */
  5.         DeleteSourceID:                 false,              /* true, false */
  6.         BriskButtonCaption:             'More Information',/* Some Text/HTML for the Caption Area */
  7.         BriskButtonCaptionStyle:        '',                 /* Additional CSS Class for the Caption Area */
  8.         BriskButtonPositionTop:         100,                /* pixels */
  9.         BriskButtonPositionLeft:        100,                /* pixels */
  10.         BriskButtonWidth:               200,                /* pixels */
  11.         BriskButtonHeight:              60,                 /* pixels */
  12.         BriskButtonMaxWidth:            550,                /* pixels */
  13.         BriskButtonMaxHeight:           200,                /* pixels */
  14.         BriskButtonContentPadding:      20,                 /* pixels */
  15.         BriskButtonStyleBorderSize:     12,                 /* pixels */
  16.         BriskButtonAnimationSpeed:      400,                /* millisseconds */
  17.         BriskButtonStyle:               'BriskButton-green',/* Name for Image Folder and CSS Styles */
  18.         BriskButtonAnimation:           'easeOutExpo'       /* Button Animation Style */
  19.     });
  20. </script>