[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...

) 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

**Daniel**

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.

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?

markieren

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>

**Daniel**

Ich denke, Du hast am Ende das Javascript vergessen.

Schau Dir mal die Test-Datei von mir an.

Super, vielen Dank.

**Jakob Ullmann**

@Daniel: Ist das das, was auch die DP nutzt?

**Matze**

Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt. Die Buttons bei den Beiträgen beispielsweise sind lediglich Grafiken.

**himitsu**

Zitat von Matze:

Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt.

wenn er nicht das Javascript-Menü "DP Info & Services" meint, dann weiß ich auch nicht wo noch ein Menü/Button versteckt ist.

Ich denke Mal Jakob meint die Buttons zum Absenden eines Beitrages oder dem beim Einloggen. Imo sehen die nicht nach Standard-0815-Buttons aus.

**Daniel**

*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.

[HTML] Google-Button-Design kopieren / nachbilden

[HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Re: [HTML] Google-Button-Design kopieren / nachbilden

Forumregeln

Balu der Bär (Gast) n/a Beiträge	#5 Re: [HTML] Google-Button-Design kopieren / nachbilden 16. Mai 2008, 13:53 Super, vielen Dank.
	Zitat

Jakob Ullmann Registriert seit: 17. Feb 2007 218 Beiträge Lazarus	#6 Re: [HTML] Google-Button-Design kopieren / nachbilden 16. Mai 2008, 14:22 @Daniel: Ist das das, was auch die DP nutzt? Jakob
	Zitat

Matze (Co-Admin) Registriert seit: 7. Jul 2003 Ort: Schwabenländle 14.929 Beiträge Turbo Delphi für Win32	#7 Re: [HTML] Google-Button-Design kopieren / nachbilden 16. Mai 2008, 14:49 Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt. Die Buttons bei den Beiträgen beispielsweise sind lediglich Grafiken.
	Zitat

Balu der Bär (Gast) n/a Beiträge	#9 Re: [HTML] Google-Button-Design kopieren / nachbilden 16. Mai 2008, 15:04 Ich denke Mal Jakob meint die Buttons zum Absenden eines Beitrages oder dem beim Einloggen. Imo sehen die nicht nach Standard-0815-Buttons aus.
	Zitat

Daniel (Co-Admin) Registriert seit: 30. Mai 2002 Ort: Hamburg 13.919 Beiträge Delphi 10.4 Sydney	#10 Re: [HTML] Google-Button-Design kopieren / nachbilden 16. Mai 2008, 15:10 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. Daniel R. Wolf mit Grüßen aus Hamburg
	Zitat