Step By Step Creating CSS Speech Bubble With Hover Effect
At the moment, I want to share how to make CSS speech bubble without using any image. You might often see chat style like below on the web.
Web designer call it speech bubble. Mozilla forum also using this style. How to create it? Just understand following steps!
You need a box, I'm using div tag, You need to write some rules for your div tag and add pseudo elements :before and :after. If you want to create CSS speech bubble without border, you can use :before only. But if you want create it with the border, you need :before and :after.
Here step by step to create CSS speech bubble.
#1 Create div tag and give it class. For example, I give it class "bubble".
<div class="bubble">This is CSS speech bubble</div>
Place that HTML code between <body> and </body>.
#2 Now you need create CSS rules. You can write CSS rules between <head> and </head>
Type these rules.
<style type="text/css">
.bubble {
background: #B8F0C5;
color: black;
position: relative;
padding: 15px;
margin-left: 20px;
-webkit-border-radius: 7px; /* Corner radius rule for Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 7px; /* Corner radius rule for Firefox 1-3.6 */
border-radius: 7px; /* Corner radius rule for Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border: 1px solid #2CC72C;
}
.bubble:before {
position: absolute;
border-color: transparent #B8F0C5;
border-style: solid;
border-width: 10px 10px 10px 0;
height: 0;
width: 0;
content: '';
left: -10px; /* horizontal position of triangle */
top: 20%; /* vertical position of triangle */
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #B8F0C5;
z-index: 1;
}
.bubble:after {
position: absolute;
border-color: transparent #1AA72C;
border-style: solid;
border-width: 10px 10px 10px 0;
height: 0;
width: 0;
content: '';
left: -11px; /* horizontal position of triangle border */
top: 20%; /* vertical position of triangle border */
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #1AA72C;
z-index: 0;
}
.bubble:hover {
background: #98E0A9;
border: 1px solid #0E6D19;
}
.bubble:hover:before {
border-color: transparent #98E0A9;
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #98E0A9;
}
.bubble:hover:after {
border-color: transparent #053C0C;
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #053C0C;
}
</style>
Done!
Open your HTML file with browser. You will see your speech bubble like this.
Width of speech bubble will fit to parent element. But, if you want speech bubble width depend on content inside, you need to add display: inline-block; inside .bubble { }
You can download all HTML and CSS code here.
Note: I have created this CSS speech bubble and it works well on latest web browsers, but it doesn't work on old browser such as IE 8 and the older versions.
Web designer call it speech bubble. Mozilla forum also using this style. How to create it? Just understand following steps!
You need a box, I'm using div tag, You need to write some rules for your div tag and add pseudo elements :before and :after. If you want to create CSS speech bubble without border, you can use :before only. But if you want create it with the border, you need :before and :after.
Here step by step to create CSS speech bubble.
#1 Create div tag and give it class. For example, I give it class "bubble".
<div class="bubble">This is CSS speech bubble</div>
Place that HTML code between <body> and </body>.
#2 Now you need create CSS rules. You can write CSS rules between <head> and </head>
Type these rules.
<style type="text/css">
.bubble {
background: #B8F0C5;
color: black;
position: relative;
padding: 15px;
margin-left: 20px;
-webkit-border-radius: 7px; /* Corner radius rule for Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 7px; /* Corner radius rule for Firefox 1-3.6 */
border-radius: 7px; /* Corner radius rule for Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border: 1px solid #2CC72C;
}
.bubble:before {
position: absolute;
border-color: transparent #B8F0C5;
border-style: solid;
border-width: 10px 10px 10px 0;
height: 0;
width: 0;
content: '';
left: -10px; /* horizontal position of triangle */
top: 20%; /* vertical position of triangle */
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #B8F0C5;
z-index: 1;
}
.bubble:after {
position: absolute;
border-color: transparent #1AA72C;
border-style: solid;
border-width: 10px 10px 10px 0;
height: 0;
width: 0;
content: '';
left: -11px; /* horizontal position of triangle border */
top: 20%; /* vertical position of triangle border */
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #1AA72C;
z-index: 0;
}
.bubble:hover {
background: #98E0A9;
border: 1px solid #0E6D19;
}
.bubble:hover:before {
border-color: transparent #98E0A9;
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #98E0A9;
}
.bubble:hover:after {
border-color: transparent #053C0C;
-moz-border-top-colors: none;
-moz-border-left-colors: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-right-colors: #053C0C;
}
</style>
Done!
Open your HTML file with browser. You will see your speech bubble like this.
This is CSS speech bubble
Width of speech bubble will fit to parent element. But, if you want speech bubble width depend on content inside, you need to add display: inline-block; inside .bubble { }
You can download all HTML and CSS code here.
Note: I have created this CSS speech bubble and it works well on latest web browsers, but it doesn't work on old browser such as IE 8 and the older versions.
