Hello readers, Today in this blog you’ll learn how to create a Responsive Chat Box using only HTML & CSS. Earlier I have shared a blog on how to create a Multi-Step Form with Step Progress Bar ulsing JavaScript. And now I’m going to create a Responsive Chat Box.
You may have seen a chat widget on different websites. A chat widget is a window on your website that allows visitors to have a chat with a sales or service in real-time. A chat widget can also be combined into social media pages and mobile apps. Chat widgets are created using different programming languages like JavaScript, PHP, Python, etc.
In this program (Responsive Chat Box UI Design), at first, on the webpage, there is only a messenger button on the right bottom corner and when you click on that button then the chatbox form appears with sliding animation and the icon of messenger also changed into a cross-sign icon. In the chatbox form, there are three input fields i.e. Name, Email, and Textarea) and a Button. This chat box is fully based on HTML & CSS, so when you filled up your info and click on the start chat button, this form won’t submit your info anywhere.
You might like this:
Responsive Chatbox Widget [Source Codes]
To create this program (Responsive Chatbox Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
overflow: hidden;
background: #f2f2f2;
}
#click{
display: none;
}
label{
position: absolute;
right: 30px;
bottom: 20px;
height: 55px;
width: 55px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
text-align: center;
line-height: 55px;
border-radius: 50px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
label i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
label i.fas{
opacity: 0;
pointer-events: none;
}
#click:checked ~ label i.fas{
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) rotate(180deg);
}
#click:checked ~ label i.fab{
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) rotate(180deg);
}
.wrapper{
position: absolute;
right: 30px;
bottom: 0px;
max-width: 400px;
background: #fff;
border-radius: 15px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .wrapper{
opacity: 1;
bottom: 85px;
pointer-events: auto;
}
.wrapper .head-text{
line-height: 60px;
color: #fff;
border-radius: 15px 15px 0 0;
padding: 0 20px;
font-weight: 500;
font-size: 20px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
.wrapper .chat-box{
padding: 20px;
width: 100%;
}
.chat-box .desc-text{
color: #515365;
text-align: center;
line-height: 25px;
font-size: 17px;
font-weight: 500;
}
.chat-box form{
padding: 10px 15px;
margin: 20px 0;
border-radius: 25px;
border: 1px solid lightgrey;
}
.chat-box form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.chat-box form .field:last-child{
margin-bottom: 15px;
}
form .field input,
form .field button,
form .textarea textarea{
width: 100%;
height: 100%;
padding-left: 20px;
border: 1px solid lightgrey;
outline: none;
border-radius: 25px;
font-size: 16px;
transition: all 0.3s ease;
}
form .field input:focus,
form .textarea textarea:focus{
border-color: #fc83bb;
}
form .field input::placeholder,
form .textarea textarea::placeholder{
color: silver;
transition: all 0.3s ease;
}
form .field input:focus::placeholder,
form .textarea textarea:focus::placeholder{
color: lightgrey;
}
.chat-box form .textarea{
height: 70px;
width: 100%;
}
.chat-box form .textarea textarea{
height: 100%;
border-radius: 50px;
resize: none;
padding: 15px 20px;
font-size: 16px;
}
.chat-box form .field button{
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
font-weight: 500;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
transition: all 0.3s ease;
}
.chat-box form .field button:active{
transform: scale(0.97);
}