Gewusst wie: Schaltfläche auf Bild
Erfahren Sie, wie Sie mit CSS eine Schaltfläche zu einem Bild hinzufügen.
Schaltfläche auf Bild
So fügen Sie eine Schaltfläche über dem Bild hinzu
Schritt 1) HTML hinzufügen:
Beispiel
<div class="container">
<img src="img_snow.jpg" alt="Snow">
<button class="btn">Button</button>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
/* Container needed to position the button. Adjust the width as needed */
.container {
position: relative;
width:
50%;
}
/* Make the
image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of
the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}