reply View all Tutorials & Projects

How to Easily Create Buttons with Icons Using HTML & CSS

In this tutorial I'll be showing you how to create a button with icons using HTML & CSS. This is easily done, and can be added to your own website or project.

Video Tutorial

Source Code

You can find the source code for this video below. Alternatively, browse it on CodePen.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Easily Create Buttons with Icons using HTML & CSS</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<button type="button" class="button">
		<span class="button__text">Download</span>
		<span class="button__icon">
			<ion-icon name="cloud-download-outline"></ion-icon>
		</span>
	</button>
	<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</body>
</html>
main.css
.button {
	display: flex;
	height: 50px;
	padding: 0;
	background: #009578;
	border: none;
	outline: none;
	border-radius: 5px;
	overflow: hidden;
	font-family: "Quicksand", sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.button:hover {
	background: #008168;
}

.button:active {
	background: #006e58;
}

.button__text,
.button__icon {
	display: inline-flex;
	align-items: center;
	padding: 0 24px;
	color: #fff;
	height: 100%;
}

.button__icon {
	font-size: 1.5em;
	background: rgba(0, 0, 0, 0.08);
}

If you have any questions about this code, please leave a comment on the video.