This content originally appeared on DEV Community and was authored by Robson Muniz
In today's video 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/Portfolio.
I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS from scratch, step-by-step!
Markup
<!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>Create Buttons with Icons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button">
<span class="button__text">Like it</span>
<span class="button__icon">
<ion-icon name="heart-outline"></ion-icon>
</span>
</button>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
</body>
</html>
🛴 Follow me for more on:
YouTube: https://bit.ly/3oBQbc0
Facebook: https://bit.ly/3cp2S5W
Instagram[New]: https://bit.ly/3Ihh2EB
This content originally appeared on DEV Community and was authored by Robson Muniz
Robson Muniz | Sciencx (2022-07-21T13:12:55+00:00) Create Buttons With Icons using HTML & CSS. Retrieved from https://www.scien.cx/2022/07/21/create-buttons-with-icons-using-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.