How to create the expected button in HTML? - html

Question

The first image was captured in Python online course. The second image was captured in my own website. I want to mimic this website for practicing html/css skill. What I want to know is how to create the expected button. Thank you for your reply.
/*Here is my CSS code, which is unfinished.*/
.Matter a:hover{
background-color: rgb(230,230,230);
}
<!-- Here is my HTML code -->
<div class='Matter'>
<h1>Welcome to the Capstone</h1>
<p><a href='#'><b>Video:</b> Introduction: Welcome to the Class</a></p>
<p><a href='#'><b>Reading:</b> Capstone Overview</a></p>
<p><a href='#'><b>Reading:</b> Help Us Learn More About You!</a></p>
</div>

Answer 1

Let's handle your problem step by step:
Styling the link: We are going to add some padding, text decoration and color. We are also using display inline-block for our link take full width.
.Matter a {
padding: 8px;
display: inline-block;
width: 100%;
text-decoration: none;
color: black;
}
Adding hover style:
.Matter a:hover{
background-color: rgb(230,230,230);
}
Adding checkmark: We need to use CSS Pseudo element ::before to add the check mark in front of the link. To add the green circle around the check mark we are using some margin, padding, border radius, background, color and font size. We are also using position to adjust the check mark circle position.
.Matter a::before {
content: '🗸';
margin-right: 8px;
padding: 2px 4px;
background: green;
border-radius: 50%;
color: white;
font-size: 12px;
position: relative;
top: -2px;
}
Here's the complete solution. You can play with it as you wish.
.Matter a {
padding: 8px;
display: inline-block;
width: 100%;
text-decoration: none;
color: black;
}
.Matter a:hover{
background-color: rgb(230,230,230);
}
.Matter a::before {
content: '🗸';
margin-right: 8px;
padding: 2px 4px;
background: green;
border-radius: 50%;
color: white;
font-size: 12px;
position: relative;
top: -2px;
}
<div class='Matter'>
<h1>Welcome to the Capstone</h1>
<p><a href='#'><b>Video:</b> Introduction: Welcome to the Class</a></p>
<p><a href='#'><b>Reading:</b> Capstone Overview</a></p>
<p><a href='#'><b>Reading:</b> Help Us Learn More About You!</a></p>
</div>