Hello, guys In this tutorial we will learn how to add an icon inside the button using CSS.
Common Query
- How to add icon inside button
- Button with icon CSS
- add icon using CSS
Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to add an icon inside the button using CSS.
First, we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to add icon inside button using CSS Only</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="button-outer">
<button class="button">
Book Now
</button>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code I provide in the below screen.
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.button {
font-size: 25px;
padding: 10px 20px;
background: #3f0069;
border: unset;
color: #fff;
cursor: pointer;
box-shadow: 0 0 2px #000;
outline: 0;
position: relative;
}
.button:before {
content: "\f017";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Add an icon inside the button Video Output:
Add an icon inside the button codepen Output:
Some JavaScript Tutorial
How to Integrate Webcam using JavaScript
Top comments (0)