HTML Border Radius um Button Image positionieren?

2 Antworten

Meinst du vielleicht das?:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    border-radius: 10%;
    border: 1px solid green;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40%;
}
</style>
</head>
<body>

<img src="test.jpg" alt="Test picture" style="width:40%">

</body>
</html>

Das sieht dann so aus: https://www.w3schools.com/code/tryit.asp?filename=GFJJYILU0APU

Sie können ein Bild als Hintegrund platzieren und seine Position und Größe durch CSS-Eigenschaften definieren:

HTML:

<a href="" class="my-button"></a>
<button class="my-button"></button>

CSS:

.my-button {
	display: block; /* oder inline-block, damit die Schaltfläche auf Größe und Hintergrund eingestellt werden kann */
	width: 50px; 	
	height: 50px;
    margin: 15px;

	border: 1px solid green;
	border-radius: 50%;

    /* Farbe des Hintergrunds */
	background-color: white;

    /* Platziere ein Bild als Hintergrund */
	background-image: url("https://www.gutefrage.net/nmms-assets/images/immutable/brand/brand-symbol.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;  /* oder 30px, oder contain, oder cover */
}

Das Ergebnis sieht so aus:

Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator
 - (Computer, HTML, CSS)

Was möchtest Du wissen?