<style>
.container{
margin:0px auto;
width: 1000px;
}
#textzoom a{
color: #0081C2;
font-family: 'Corbel';
font-size:4em;
font-weight: bold;
text-decoration: none;
transition:all 2s ease-in-out;
}
#textzoom a:hover{
font-size:8em;
transition:all 2s ease-in-out;
}
</style>
<div class="container">
<div id="textzoom">
<a href=""> Text Zoom</a>
</div></div>
<style>
.container{
margin:0px auto;
width: 1000px;
}
#shadowtext1 a{
color: #026202;
font-family: Arial,sans-serif;
font-size: 45px;
font-weight: bold;
text-decoration:none;
text-shadow:2px 2px black;
}
#shadowtext2 a{
color: #026202;
font-family: Arial,sans-serif;
font-size: 45px;
font-weight: bold;
text-decoration:none;
text-shadow:2px 2px 2px black;
}
#shadowtext3 a{
color: #026202;
font-family: Arial,sans-serif;
font-size: 45px;
font-weight: bold;
text-decoration:none;
text-shadow:5px 6px 5px black;
}
.text1 a{
color: #054d52;
text-decoration: none;
font-family: Arial,sans-serif;
font-size: 45px;
font-weight: bold;
text-shadow:0px 0px 5px #000;
}
</style>
<div class="container">
<hr>
<div id="shadowtext1">
<a href=""> Life Is Beautiful</a>
</div>
<hr>
<div id="shadowtext2">
<a href=""> Life Is Beautiful</a>
</div>
<hr>
<div id="shadowtext3">
<a href=""> Life Is Beautiful</a>
</div>
<hr>
<div class="text1">
<a href=""> Life Is Beautiful</a>
</div>
</div>
Circle symbol:
#circle{
width: 200px;
height: 200px;
border-radius:50%;
background:linear-gradient(top, #054d52 0%, #057178 100%);
background:-webkit-linear-gradient(top, #054d52 0%,#057178 100%);
background: -moz-linear-gradient(top, #054d52 0%, #057178 100%);
background: -ms-linear-gradient(top, #054d52 0%, #057178 100%);
background: -o-linear-gradient(top, #054d52 0%, #057178 100%);
}
<div id="circle">
</div>
Chat bubble symbol:
#chat-symbol{
width: 100px;
height: 80px;
background: #054d52;
position: relative;
border-radius:8px;
}
#chat-symbol:before{
content: "";
position: absolute;
left: 100%;
top: 26px;
border-top: 13px solid transparent;
border-left: 26px solid #054d52;
border-bottom: 13px solid transparent;
}
<div id="chat-symbol">
</div>
