Skip to main content

Cart Notification Button Design | Rustcode

by Rustcode
Cart-Notification-Button-Design-HTML-And-CSS-Rustcode
"Cart notification button" generally you will see in an e-commerce website like amazon. Some websites are using icons to design cart notification buttons. But here we are not using icons. we will simply design a normal button and the count will be shown on the right top.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
  <title>Cart Notification Button Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


2. HTML

<body>

  <div class="container">
   <a href="#" class="btn">
	<span><b>Cart</b></span>
	<span class="badge">4</span>
   </a>
  </div>

</body>


3. CSS

body{
font-family: arial;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
position: relative;
background: #2898F3;
color: white;
text-decoration: none;
padding: 14px 28px;
display: inline-block;
border-radius: 2px;
}
.btn:hover{
background: #1B7ADD;
}
.btn .badge{
position: absolute;
top: -10px;
right: -10px;
padding: 5px 9px;
border-radius: 50%;
background: #333;
color: white;
}


5. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


6. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment