Saturday, 15 August 2015

How to Create a 3D Button or Boxes in HTML & CSS3 WITH Hover Effect


How to Create a 3D Button in CSS3

CSS Code is Here

button
{
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
word-wrap: break-word;
border-radius: 5px ;
height: 45px;
width: 180px;
font-size: 18px;
background-color: #D22E2E;
text-decoration-line:none;
padding: 14px 5px; 
font-family: 'Helvetica Neue', Helvetica, sans-serif;
display:inline-block;
box-shadow: 0px 5px 0px 0px #5A0C0C;
text-align: center;
transition: .9s all ease-in;border: 0px;
}
 button a
{
text-decoration: none;
color: white;
text-align: center
}

Uses with Hover Property



button:hover 
color: #fff;
text-shadow:none;
box-shadow:none;
background-color:#D22E2E;
text-decoration: underline  
}

No comments:

Post a Comment