|
[HTML] Google-Button-Design kopieren / nachbilden
Moin,
ich hätte gerne solche tollen Buttons wie sie Google hier einsetzt:  http://translate.google.de/translate_t (die "Englisch"-, "Deutsch"-, "Übersetzen"-Buttons). Leider jedoch ist der HTML- & CSS-Code derart verzwickt (ein Span und vier Divs für einen Button... :gruebel: ) das ich Laie da nicht mehr durchsehe was ich wo kopieren muss um die Buttons so hinzubekommen. Wie bekomme ich relativ einfach solche Buttons hin, hat da einer ne Idee? Danke und Grüße |
Re: [HTML] Google-Button-Design kopieren / nachbilden
Mit Fleiß und Spucke kann man sowas natürlich selbst machen.
Aber ich nutze mehr und mehr die YUI-Library von Yahoo. Die haben auch sog. Menu-Buttons im Angebot: http://developer.yahoo.com/yui/button/.Natürlich gibt es belibige Bibliotheken, aber diese hat den Vorteil, dass sich sie recht gut auf den tatsächlich benötigten Code herunterbrechen lässt und dadurch vergleichsweise leichtfüßig ist. Bei Delphi nutze ich seit Jahren ein Framework, um schneller zum Ziel zu kommen und ich habe für mich entschieden, dies bei Javascript ebenfalls zu tun. AJAX-Requests beispielsweise, die zu Zweizeilern werden, sind einfach sympathisch. ;-) |
Re: [HTML] Google-Button-Design kopieren / nachbilden
Hey Chef,
besten Dank das sieht perfekt aus. :-) Leider kriege ich nur nix hin. Wenn ich den Punkt "Getting Started" richtig verstanden habe, sollte es reichen die Dateien einzubinden? Die Beispiel-Codes erzeugen bei mir jedoch nur Standard-0815-Buttons. Muss ich doch das Zip runterladen oder wie geht das? :gruebel:
Code:
<html>
<head> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/button/assets/skins/sam/button.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/menu/assets/skins/sam/menu.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/button/button-min.js"></script> <title></title> </head> <body> <button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <div id="buttons"> <input type="button" id="ok-button" name="ok-button" value="OK"> <input type="button" id="cancel-button" name="cancel-button" value="Cancel"> </div> </body> </html> |
Re: [HTML] Google-Button-Design kopieren / nachbilden
Liste der Anhänge anzeigen (Anzahl: 1)
Ich denke, Du hast am Ende das Javascript vergessen.
Schau Dir mal die Test-Datei von mir an. |
Re: [HTML] Google-Button-Design kopieren / nachbilden
Super, vielen Dank.
|
Re: [HTML] Google-Button-Design kopieren / nachbilden
@Daniel: Ist das das, was auch die DP nutzt?
|
Re: [HTML] Google-Button-Design kopieren / nachbilden
Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt. Die Buttons bei den Beiträgen beispielsweise sind lediglich Grafiken.
|
Re: [HTML] Google-Button-Design kopieren / nachbilden
Zitat:
|
Re: [HTML] Google-Button-Design kopieren / nachbilden
Ich denke Mal Jakob meint die Buttons zum Absenden eines Beitrages oder dem beim Einloggen. Imo sehen die nicht nach Standard-0815-Buttons aus.
|
Re: [HTML] Google-Button-Design kopieren / nachbilden
*g*
Was ist an diesem Forum schon Standard-08/15? ;-) Das mit den Buttons hier in der DP ist ein simpler CSS-Effekt. Müsste ein Hintergrundbild oder dgl. sein. |
| Alle Zeitangaben in WEZ +1. Es ist jetzt 21:54 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz