linien entfernen?
zwischen denn button sind so kleine linien. wie kan man die enfernen?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
<link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Homepage</h1>
<a href="https://youtube.com">
<button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
</a>
<a href="https://discord.com/channels/@me">
<button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
</a>
<a href="https://github.com">
<button class="github"><i class="fa-brands fa-github"></i> Github</button>
</a>
</div>
</body>
</html>
style.css
body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
.youtube {
align-self: center;
background-color: #f44336;
font-size: 20px;
padding: 14px 40px;
border-radius: 8px;
color: black;
border: 2px solid black;
}
.discord {
background-color: #738adb;
font-size: 20px;
padding: 14px 40px;
border-radius: 8px;
color: black;
border: 2px solid black;
}
.github {
background-color: #495057;
font-size: 20px;
padding: 14px 40px;
border-radius: 8px;
color: black;
border: 2px solid black;
}
3 Antworten
Die <a> Tags müssen wahrscheinlich weg. Stattdessen solltest Du einen click-Handler für die Buttons verwenden.
und wie leite ich denn nutzer auf eine seite weiter?
Lies die verlinkte Seite nach meinem Kommentare "... in Verbindung mit ...".
Buttons sind kein gültiges Kind von A-Tags.
Ich würde daher die Buttons weglassen, ggf. noch ein text-decoration: none auf die a-tags, auf die Art brauchst keine JS Events. Ein rel="external noopener noreferrer" würde solchen Links auch nicht schaden
<a href="https://youtube.com" class="youtube" rel="external noopener noreferrer"><i class="fa-brands fa-youtube"></i> YouTube</a>
<a href="https://discord.com/channels/@me" class="discord" rel="external noopener noreferrer"><i class="fa-brands fa-discord"></i> Discord</a>
<a href="https://github.com" class="github" rel="external noopener noreferrer"><i class="fa-brands fa-github"></i> Github</a>
.container a {
text-decoration: none;
}
Wie wäre es, wenn du einfach Bootstrap nutzt. Dann hast du saubere Abstände und die Linien sind weg. Dazu ist das Design noch ordentlich.
Ein Frontend-CSS-Framework. Macht responsives Design und modernes Layout einfach.
ok und wie macht man das?