Hello developers, today in this blog, you'll learn to create a Popup Subscribe Button using HTML & CSS.
Subscribe button is the type of button or medium to follow and get regular updates or notifications of that particular person's work. For example, you have subscribed to our blog. It helps notify you when we upload a new post on our blog.
In this blog (Popup Subscribe Button) on the webpage, there is a card or box at the top center of the webpage. The popup box contains a logo on the left side and, on the right side, there are some text and a subscribe button. There is a cross button for hiding the toast notification. When you click on the cross button, the popup will disappear by going to the right side of the webpage. It is made by using CSS animation property.
The source code of this Popup Subscribe Button is given below, if you want the source code of this program, you can copy it. You can use this Popup Subscribe Button with your creativity and take this project to the next level.
Popup Subscribe Button [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
background: #f2f2f2;
overflow: hidden;
}
.container{
margin-top: 30px;
display: flex;
align-content: center;
justify-content: center;
}
.container .box{
background: #fff;
display: flex;
align-items: center;
border-radius: 6px;
padding: 25px 35px 25px 35px;
box-shadow:0px 0px 10px 2px rgba(0,0,0,0.1);
position: relative;
animation: show_box 0.8s ease forwards;
}
@keyframes show_box {
0%{
transform: translateX(100%);
}
40%{
transform: translateX(-5%);
}
80%{
transform: translateX(0%);
}
100%{
transform: translateX(-10px);
}
}
#hide:checked ~ .box{
animation: hide_box 0.8s ease forwards;
}
@keyframes hide_box {
0%{
transform: translateX(0%);
}
40%{
transform: translateX(5%);
}
80%{
transform: translateX(0%);
}
100%{
transform: translateX(calc(100% + 550px ));
}
}
.container .box i{
position: absolute;
right: 15px;
top: 10px;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.container i:hover{
color: #000;
}
.container .logo{
height: 90px;
width: 90px;
margin-right: 15px;
}
.container .logo img{
height: 100%;
width: 100%;
object-fit: cover;
}
.box .right{
display: flex;
flex-direction: column;
}
.box .right .text-1{
font-size: 18px;
font-weight: 600;
color: #333;
}
.box .right .text-2{
font-size: 14px;
color: #666;
margin: 2px 0 8px 0;
}
.box .right a{
font-size: 18px;
font-weight: 500;
display: block;
padding: 8px 0;
background: #9867c5;
border-radius: 6px;
color: #fff;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
.box .right a:hover{
background-color: #B721FF;
}
.container #hide{
display: none;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#000;
text-align: center;
}
Thank you for reading our blog. If you face any problem creating this Popup Subscribe Button using HTML & CSS, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team