Pure Css Text Box With Mouse Over & Copy Text Color Change Effect

Pure Css Text Box With Mouse Over & Copy Text Color Change Effect

As you see below a pure Css text box with mouse over effect That change color while moving mouse around text box also its change color while you copy text inside this text box .This text box is having hover effect which make this software good looking the main advantage of this text box is that it change it color from black to Cornflower Blue when you will mouse over it.And if you click on text box it changes it color to shrek green.The border of the text box having  stitched effect and also having box shadow behind box.

Find out how to make Pure Css Text box-

Its all the about Css & Html.If you know basic of Css & Html the you can make this text box.You don't need to make code as I will provide you.You only need to copy and paste.

How Add This Code In CSS 

1. Go To Blogger >> Template >> Customise 

2. After Opening  Template Customise Go To Advanced >> Add Css.
3. And there paste the code.

 Paste Following Code In Add Custom CSS Field

.postmsgg23
{
color: white;
background-color: black;
width: 500px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}

.postmsgg23:hover
{
background-color: CornflowerBlue ;

}
.postmsgg23:active
{
background-color: darkgreen ;
}

Paste The Html Section where you want to put Css text box in your Website and Paste the Css section in your website Css.

HTML 

<div class="postmsgg23" style="font-family: &quot;Courier New&quot;,Courier,monospace;">Yout Text Here</div>

 

IF you are facing any problem to add this Pure Css Text Box in Blogger, Feel free to comments here.