Buttons

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hallo,

    ich bin gerade dabei, mir eine HP zu erstellen. Ich habe allerdings nur sehr wenig bis gar keine Ahnung von HTML. Ich nutze im Moment den Macromedia Dreamweaver CS3.
    Meine Frage: Ich möchte gern in meiner Menüleiste schöne Buttons haben, etwa nach diesem Beispiel: Beispiel
    Wie macht man so etwas? Also, dass wenn man mit der Maus auf den Button fährt, der Hintergrund dann türkis wird?
    Wäre echt dankbar für eure Hilfe

    MfG
    :D
  • Eine Möglichkeit wäre sowas hier:

    Beispiel

    Quellcode

    1. <table width="150" border="0" cellspacing="1" bgcolor="000000">
    2. <tr>
    3. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    4. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://link.de" target="_blank">link</a></font></td>
    5. </tr>
    6. <tr>
    7. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    8. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://#.de" target="_blank">link</a></font></td>
    9. </tr>
    10. <tr>
    11. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    12. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://#.de" target="_blank">link</a></font></td>
    13. </tr>
    14. <tr>
    15. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    16. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://#.de" target="_blank">link</a></font></td>
    17. </tr>
    18. <tr>
    19. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    20. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://#.de" target="_blank">link</a></font></td>
    21. </tr>
    22. <tr>
    23. <td onMouseOver="style.backgroundColor='99B970'; return true" onMouseOut=style.backgroundColor=''
    24. bgcolor="5A7438"><font size="2" face="Verdana Ref"> <a href="http://#.de" target="_blank">link</a></font></td>
    25. </tr>
    26. </table>
    Alles anzeigen


    Hoffe es hilft :)
  • Die Möglichkeit von Rosette ist allerdings auf ein Javascript aufgebaut. Da aber viele genau das ausgeschalten haben, würde ich es nicht empfehlen.
    Besser fände ich dafür CSS. Schaus dir am besten mal bei selfHTML an, damit du es verstehst. Ich könnte auch ein kleines Beispiel für dich machen, falls du es brauchst.

    mfg
    lalala22
    [SIZE="1"][COLOR="DeepSkyBlue"][COLOR="Black"]W[/color]ithout
    [COLOR="Black"]A[/color]ny
    [COLOR="Black"]R[/color]easons[/color]
    [/SIZE]
  • So gehts. Musst dann halt noch für deine Bedürfnisse anpassen.

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>kleines Beispiel</title>
    4. <style type="text/css">
    5. div#button {
    6. width:7em;
    7. height:1em;
    8. float:left;
    9. margin:0;
    10. text-align:center;
    11. background-color:#4C664C;
    12. border:1px solid #000000;
    13. }
    14. div#button a:link {
    15. color:#eeeeee;
    16. display:block;
    17. width:7em;
    18. }
    19. div#button a:visited {
    20. color:#eeeeee;
    21. display:block;
    22. width:7em;
    23. }
    24. div#button a:hover {
    25. background-color:#00FFFF;
    26. color:#000000;
    27. width:7em;
    28. display:block;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <div id="button"><a href="http://www.freesoft-board.to">Freesoft-Board</a></div>
    34. <div id="button"><a href="http://www.rapidshare.de">Rapidshare</a></div>
    35. <div id="button"><a href="http://www.google.de">Google</a></div>
    36. </body>
    37. </html>
    Alles anzeigen
    [SIZE="1"][COLOR="DeepSkyBlue"][COLOR="Black"]W[/color]ithout
    [COLOR="Black"]A[/color]ny
    [COLOR="Black"]R[/color]easons[/color]
    [/SIZE]
  • Hi shisha,

    aber die buttons sind doch nicht schön!!! (Liegt aber wohl im Auge des Betrachters)

    Wenn du Adobe Photoshop haben solltest findest du

    hier

    ein Tutorial zum erstellen von Buttons uvm. :bing:

    Gruß

    SoniC
  • Ich glaube ich hätte da etwas für Dich was Du suchst.
    Benutze es selber auf meine HP und die Buttons sind in CSS

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Effekte mit Farben</title>
    4. <style type="text/css">
    5. body {
    6. font-family: Verdana, Arial, Helvetica, sans-serif;
    7. font-size: 100.01%;
    8. }
    9. #menue {
    10. width: 150px;
    11. font-size: 80%;
    12. }
    13. .menuekopf {
    14. font-weight: bold;
    15. color: #FFFFFF;
    16. width: 163px;
    17. padding: 5px;
    18. border: 1px solid #000000;
    19. margin-bottom: 2px;
    20. background-color: #666666;
    21. }
    22. #menue ul {
    23. list-style-type: none;
    24. padding: 0px;
    25. margin: 0px 0px 20px;
    26. }
    27. #menue li {
    28. display: block;
    29. border: 1px solid #000000;
    30. margin-bottom: 2px;
    31. }
    32. #menue li a, #menue li a:link {
    33. text-decoration: none;
    34. display: block;
    35. color: #000000;
    36. width: 163px;
    37. padding: 5px;
    38. }
    39. #menue li a:visited {
    40. color: #FFFFFF;
    41. }
    42. #menue li a:hover, #menue li a:active, #menue li a:focus {
    43. color: #990000;
    44. background-color: #CCCCCC;
    45. }
    46. .bgblau {
    47. background-color: #0000FF;
    48. }
    49. .bgrot {
    50. background-color: #FF0000;
    51. }
    52. .bggruen {
    53. background-color: #00CC00;
    54. }
    55. .bggelb {
    56. background-color: #FFFF00;
    57. }
    58. .bglila {
    59. background-color: #990099;
    60. }
    61. </style>
    62. </head>
    63. <body>
    64. <div id="menue">
    65. <div class="menuekopf">Men&uuml; 1</div>
    66. <ul>
    67. <li class="bgblau"><a href="#">Hyperlink 1.1</a></li>
    68. <li class="bgrot"><a href="#">Hyperlink 1.2</a></li>
    69. <li class="bggruen"><a href="#">Hyperlink 1.3</a></li>
    70. <li class="bggelb"><a href="#">Hyperlink 1.4</a></li>
    71. <li class="bglila"><a href="#">Hyperlink 1.5</a></li>
    72. </ul>
    73. <div class="menuekopf">Men&uuml; 2</div>
    74. <ul>
    75. <li class="bgblau"><a href="#">Hyperlink 2.1</a></li>
    76. <li class="bgrot"><a href="#">Hyperlink 2.2</a></li>
    77. <li class="bggruen"><a href="#">Hyperlink 2.3</a></li>
    78. <li class="bggelb"><a href="#">Hyperlink 2.4</a></li>
    79. <li class="bglila"><a href="#">Hyperlink 2.5</a></li>
    80. </ul>
    81. </div>
    82. </body>
    83. </html>
    Alles anzeigen


    Die Farbe und Breite kannst Du nach Deinen wünschen ändern ;)

    Ich hoffe es defällt Dir

    Gruss flitzi05