Skip to content

Instantly share code, notes, and snippets.

@Krasipeace

Krasipeace/buttons.css

Last active September 27, 2023 10:59
Show Gist options
  • Save Krasipeace/fa1184c300719e0b06e78f22f1ff16fd to your computer and use it in GitHub Desktop.
Save Krasipeace/fa1184c300719e0b06e78f22f1ff16fd to your computer and use it in GitHub Desktop.
Download ZIP
buttons.css
Raw
buttons.css
body {
background-color: lightgray;
color: black;
padding: 50px;
}
a {
text-decoration: none;
}
.button {
display:inline-block;
cursor: pointer ;
border: 2px solid rgb(51, 51, 51);
border-radius: 25px;
padding: 5px 15px;
background-color: transparent;
color: rgb(51, 51, 51);
}
.fill {
background-color: rgb(51, 51, 51);
color:rgb(251, 251, 251);
}
.hover:hover {
background-color: white;
color:rgb(0, 102, 0);
}
.fill + .hover:hover {
background-color: rgb(0, 102, 0);
color: white;
}
Raw
buttons.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="styles.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<title>Buttons CSS</title>
</head>
<body>
<h2>Normal Buttons</h2>
<a class="button" href="#">Learn More</a>
<button class="button">Learn More</button>
<button class="button hover">Learn More</button>
<h2>Filled Buttons</h2>
<a class="button fill" href="#">Learn More</a>
<button class="button fill">Learn More</button>
<button class="button fill hover">Learn More</button>
<h2>Icon Buttons</h2>
<a class="button fill" href="#"><i class="fa-solid fa-arrow-down fa-beat-fade"></i> Download</a>
<button class="button fill"><i class="fa-solid fa-arrow-down fa-bounce"></i> Download</button>
<button class="button fill hover"><i class="fa-solid fa-arrow-down fa-beat"></i> Download</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment