Responsive Chat Box
Responsive Chat Box UI Design using HTML and CSS
Details: Responsive Chat Box
Chat boxes are a part of many user interfaces in apps and websites. The design of chat box UI is usually based on the app that uses it. If you’re designing a chat UI for a messenger, then it will have a chat box. Designing a chat UI for an instant messaging app will involve designing a chat box with inline answers to messages. Chat boxes are popular with users as they make it easier to communicate with others in real time. Creating a beautiful and responsive chat box UI is an essential skill for web developers and designers.
Chat boxes are an effective way for groups of people to communicate in real time, but poorly-designed chats can make this experience frustrating for everyone involved. To create an effective chat box UI, carefully plan out how you’ll deliver information and entertain your group simultaneously using HTML, CSS, and jQuery first! Then follow up by planning how your group can interact with this information effectively using predefined buttons within your app or website’s design guidelines. There are many examples of good chat box designs available online so that everyone involved in group conversations can benefit from incorporating them into their apps and websites!
We can create this responsive chatbox widget by creating an HTML file and a CSS file. Use this code below for each of the created file.
HTML Code: Responsive Chat Box
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Responsive Chat Box Design | DuraScripts</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="click">
<label for="click">
<i class="fab fa-facebook-messenger"></i>
<i class="fas fa-times"></i>
</label>
<div class="wrapper">
<div class="head-text">
Let's chat? - Online</div>
<div class="chat-box">
<div class="desc-text">
Please fill out the form below to start chatting with the next available agent.</div>
<form action="#">
<div class="field">
<input type="text" placeholder="Your Name" required>
</div>
<div class="field">
<input type="email" placeholder="Email Address" required>
</div>
<div class="field textarea">
<!-- Due to more textarea fields I got an error so I've changed the textarea name into changeit..Change the tag name to use it -->
<changeit cols="30" rows="10" placeholder="Explain your queries.." required></changeit>
</div>
<div class="field">
<button type="submit">Start Chat</button>
</div>
</form>
</div>
</div>
</body>
</html>
CSS Code: Responsive Chat Box
@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);
}
Recommended: Responsive Pricing Tables using only HTML & CSS
