wie kann ich mit bootstrap ein bild zu einem button machen?

wie kann man aus einem bild sozusagen einen button machen, also natürlich ohne hover effekte und so, dass man das banner an der seite anklicken kann und man auf eine andere seite weitergeleitet wird?

16.03.2021, 15:00

ja also dass kein link oder button zu sehen ist, sondern nur ein bild, welches man anklicken kann

1 Antwort

elmex7

16.03.2021, 14:58

Am einfachsten mit einem Link:

Oder wenn es unbedingt "Button" sein soll

Mensch4

Beitragsersteller

16.03.2021, 15:03

bei <button onclick="self.location.href='seite'"><img src="bild"/></button>
erscheint trotzdem eine art box außenrun

Mensch4

Beitragsersteller

16.03.2021, 15:00

ja also dass kein link oder button zu sehen ist, sondern nur ein bild, welches man anklicken kann

LamaAgent

16.03.2021, 15:07

@Mensch4

Hast du die obere Version schon ausprobiert?

elmex7

16.03.2021, 15:07

@Mensch4

Kannst natürlich auch sowas machen

Allerdings sind Links und Buttons doch eh nicht "sichtbar"?

Mensch4

Beitragsersteller

16.03.2021, 15:12

@elmex7

die linie beim button ist sichtbar, das erste funktioniert allerdings einwandfrei

RainDrop123123

16.03.2021, 15:19

@Mensch4

Schau mal nach text-"decoration"

Wichtig beim "Entwickeln" ist, Dinge zu verstehen. Also versuche rauszufinden, woher die "linie" kommt und dann schau, wie du die weg bekommst ;)

Ähnliche Beiträge

Bootstrap Dropdown Menü öffnet außerhalb des Bildschirms?

Hi, ich habe auf meiner Website ein Bootstrap Dropdown Menü eingebaut. Dieses befindet sich links am Bildschirmrand. Wenn ich drauftippe, öffnet es sich so, dass die Schrift außerhalb des Bildschirm ist, man das menü also nur zur Hälfte sehen kann. Wie kann ich den Code hier verändern, damit Bootstrap weiß, dass es das menü nicht nach links sondern nach rechts öffnen soll.

Der Code:

<div class="dropdown">
                <button class="btn btn-secondary btn-success px-3" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-bars"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                    HIER SIND DIE EINZELNEN LISTENELEMENTE!!!
                </ul>
            </div>

Da das Problem schwer zu erklären ist, kann gerne auch unter meiner GuteFrage profil Seite auf meine Website gehen und auf den Menübutton drücken. Man meine website dann nur auf einem handy oder so öffnen, da sonst der Bildschirm groß genug für das Menü wäre.

Danke für jede Hilfe!!

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

jQuery('#hoverdiv').hoverdiv(

function() {$('#Kindelement').show();},

function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

background-color: red;

z-index: 1;

}

.Kindelement

{

position: absolute;

top:0;

background-color: blue;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

opacity: 0;

z-index: 2;

}

.hoverdiv

{

position: relative;

}

.hoverdiv:hover + .Kindelement

{

opacity: 1;

}

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey;

color: white;

border-radius: 50px !important;

font-family: "Helvetica Neue",

Arial, sans-serif !important;

float: none !important;" ;>

<div id="Kindelement"

style="color: white;

background: grey;

position: absolute;

top: 770px !important;

opacity: 0;">

</div>

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

...zum Beitrag

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zum Beitrag

HTML/CSS Linkfarbe in Button ändern?

Hey,

Ich habe nun als Aufgabe bekommen, eine Support Seite zu programmieren, wo alle verschiedenen Möglichkeiten zum Support angezeigt werden

(TeamSpeak, Ticket-System und E-Mail).

Dort ist auch ein Button mit z.b. dem Text "Ticket-System öffnen".

Dieser leitet dann auf eine andere Seite weiter, nur wenn man dort drauf klickt, und dann zur Support Seite zurück kehrt, wird im Button der Text "Ticket-System öffnen"

in Blau angezeigt, weil man diesen Link auf den man weitergeleitet wird, schonmal war.

Wie kann man das deaktivieren, für alle Besucher?

Danke im Vorraus :)

...zum Beitrag

HTML: Untere Ebene trotz Bild darüber anklicken?

Hallo! Ich möchte ein Bild so über die Website legen, dass die Ränder verziert sind, man aber dort wo keine Verzierungen sind noch Buttons, Links, etc. anklicken kann.

Siehe: http://mg.dot-design.de/index.php

Dabei habe ich das Bild so über die Seite gelegt:

  <img src="overlay.png" style="width: 100%; height: 100%; position: fixed;">

...zum Beitrag

Hover Effekt funktioniert nicht, warum?

Also ich habe folgendes Problem. Ich möchte, dass ein Listenelement sichtbar wird, wenn man über die komplette Liste mit dem Mauszeiger fährt. Allerdings funktioniert das einfach nicht und ich weiß nicht warum. Habe es auch schon mit display probiert und ohne der ul eine Klasse zuzuordnen. Hier mal der html-Code:

<li>Badeanzug</li>

<li>Handtuch</li>

<li>essen und trinken</li>

<li id="info2">Und natürlich Freude :D</li>

</ul>

Und das wäre jetzt der css-Code:

.effekt2:hover + #info2{

visibility: visible;

}

#info2{

visibility: hidden;

}

Ich weiß leider nicht genau was ich ändern soll und bin ziemlich planlos. Vielen Dank im Voraus für eure Hilfe^^

...zum Beitrag

Buttons in CSS untereinanderstellen?

Hallo, ich muss für den Unterricht morgen eine eigene Seite erstellen, die ist noch relativ Leer, da ich 1. keine Kreativität besitze und 2. mich schon seit Stunden mit den Buttons rumplage. Mein Problem ist, ich habe zwei Buttons erstellen die beide "hovern" sollen, das funktioniert ja auch nur will ich die Buttons untereinander jedoch egal was ich mache, entweder der zweite Button wird weiß, er überlappt mit dem anderen oder ist gänzlich von ihm Abhängig, und genau da liegt mein Problem! Wie schaffe ich es, dass der zweite Button vom ersten unabhängig ist und ich ihn dort platzieren kann, wo es mir beliebt?

Hier die Screenshots der Seite und der Codierung, nicht wundern wegen dem Link, wollte nur ausprobieren ob es funktioniert

http://prntscr.com/e964z7

Wie man sehen kann ist die Schriftart bei "Über mich" geändert ohne jeglichen Befehl.

...zum Beitrag

jQuery: An- und Ausschalter programmieren mit einer Variablen Programmieren?

Ich muss folgende Aufgabe lösen:

"Beim Überfahren des großen Bildes wird die Grafik „bild1.jpg“ gegen die Grafik „bild2.jpg“ ausgetauscht – beim Verlassen des Bildes wird die ursprüngliche Grafik wieder angezeigt.

Dieses Austauschen funktioniert aber nur, wenn zuvor der Ausschalter mit einem Klick „angeschaltet“ wurde – Grafiktausch mit Datei „schalterein.png“. Wird der Schalter wieder ausgeschaltet, dann geht auch die Mouseover-Funktionalität nicht mehr. Wichtig: Arbeiten Sie mit einer Variablen namens schalter."

Bei dem Schalter handelt es sich um ein Image und keinen Button.

Der erste Teil der Aufgabe - der Grafiktausch beim Hovern - ist kein Problem.

Den Schalter bekomme ich aber nicht programmiert. In anderen Aufgaben haben wir immer einen separaten An- und Ausschalter programmiert, bisher nicht beides zusammen und ich komme einfach nicht auf eine Lösung.

Bisher habe ich nur den Anschalter programmiert (kann natürlich falsch sein):

var Schalter=0;

$("img:eq(2)").click(function (){ Schalter=1; $("img:eq(2)").attr("src","schalterein.png"); })

Wenn man wieder auf das Schalter img klickt soll der Schalter=0 werden, das Bild soll sich wieder ändern & somit wäre er ausgeschaltet.

Ob der Schalter auf 0 oder 1 steht dient zur Abfrage um den Hover Effekt/ Grafiktausch zu aktivieren bzw. deaktivieren.

Kann auch sein, dass mein Ansatz total falsch ist. Ich hoffe jemand kann mir hier weiterhelfen.

...zum Beitrag

Was ist besser?

Hallo, Ich versuche eine website zu machen: "https://thedarkonion.github.io/MyDrugs-2.0/index.html"

es geht um eine website für unterhaltung sie ist eine fan recreate von mydrugs.to (eine netflix serie) und es gibt mehrere seiten Die haupt page (Homepage, startseite) wo es einen button gibt "SHOP NOW" die zur anderen seite hinleitet zur shopseite (kein echter shop nur aus spass) aber wichtig jetzt ist die homepage oder startseite nähmlich der button nimmt mehr platz ein wie er eigentlich sollte Wenn ihr wollt könnt ihr aml auf die seite oben gehen das ist meine seite die ich meine. Der button ist in der mitte wenn man auf die seite geht sollte man es sehen. Und wenn man oben in der ecke Oder über den button (alle bereiche neben/unten/über/in der nähe) von den button ist kann man drauf klicken und man wird ungewollt weitergeleitet zu der website. Ich habe eine lösung gefunden Aller dings ist dann der button nicht mehr in der mitte sondern an der seite:

In der ecke der "SHOP NOW" button. Und da ist der button genau richtig ohne das man ungewollt weitergeleitet wird aber Normal ist es so:

der "SHOP NOW" button ist in der mitte was auch gut aussieht aber das problem ist: man kann in den angezeigten bereichen ausversehen weitergeleitet werden:

Also was ist besser?

...zum Beitrag

wie mit css , html oder php bildgröße einstellen?

ich habe ne webseite auf der andere leute bilder hochladen können, diese bilder müssen letztenendes immer genau gleich groß sein, wie mach ich das mit einer der folgenden möglichkeiten?

Bild direkt nach upload mit php irgenwie beschneiden und quadratisch machen
mit css quadratisch machen sodass ein stück links und rechts fehlt
mit css quadratisch machen ohne dass links und rechts was fehlt sondern oben und unten ein weißer rand ist

aber das bild darf auf keinen fall verzogen sein oder so

...zum Beitrag

Meldung auf Webseite programieren?

Hallo, ich würde gerne auf meiner Webseite einen link einfügen, wenn man auf den klickt, wird auf eine weitere Seite von meiner Webseite geleitet. Sobald diese Webseite auf die der link führe geladen ist, soll ein PopUp auftauchen, mit einen Kästchen das man anklicken muss, welches Pflicht ist. Wenn man einen Harken setzt und auf den Button klickt soll die Meldung sich schließen.

Kon t ihr mir einen Quellcode senden oder eine Webseite, wo das erklärt wird, wie das geht AUF DEUTSCH BITTE

...zum Beitrag

Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

...zum Beitrag

Website mit Zufallsgenerator?

Ich habe eine Website und wenn die Besucher dann einen bestimmten Link anklicken, dann sollen sie auf eine andere Seite von mir weitergeleitet werden (ist ja logisch). Auf der Seite sollen die dann eine Zufällige "Antwort, Wort..." erhalten, die ich vorher schon vordefiniert habe.

Beispiel: Ich habe die Antworten: Hund, Katze und Maus vordefiniert. Der User lädt die Website und bekommt ein Pop-Up, oder was auch immer wo z.B Maus steht. Ein anderer wieder bekommt die Antwort: Hund Und so weiter...

Ich würde mich sehr über eine Antwort freuen und natürlich bin ich auch für Alternativen freuen.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen