Intoduction :-
Hii Friends...
Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes trendy. Its a hottest style to put a photographic background images. We call these button as a ghost buttons. Its a very easy and styli. You can even add them your posts and pages without writing CSS or HTML. its a simply a button with a border and a transparent background color.
Example :-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, div
{
width:100%;
height:100%;
margin:0;
background:#249fa3;
position:absolute;
}
.ghost
{
display:inline-block;
position: relative;
top: 50%;
left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 3em;
letter-spacing: 0.1em;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
text-rendering:optimizeLegibility;
border:0.10em solid #fff;
padding:0.4em 0.6em;
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
transition: color 300ms, background 500ms, border-color 700ms;
}
.ghost:hover
{
background:#d47497;
border-color:#91f21b;
color:#545e7a;
}
</style>
</head>
<body>
<div>
<a class="ghost" href="http://dotnetmodules.blogspot.in">Button</a>
</div>
</body>
</html>
Hii Friends...
Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes trendy. Its a hottest style to put a photographic background images. We call these button as a ghost buttons. Its a very easy and styli. You can even add them your posts and pages without writing CSS or HTML. its a simply a button with a border and a transparent background color.
Example :-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, div
{
width:100%;
height:100%;
margin:0;
background:#249fa3;
position:absolute;
}
.ghost
{
display:inline-block;
position: relative;
top: 50%;
left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 3em;
letter-spacing: 0.1em;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
text-rendering:optimizeLegibility;
border:0.10em solid #fff;
padding:0.4em 0.6em;
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
transition: color 300ms, background 500ms, border-color 700ms;
}
.ghost:hover
{
background:#d47497;
border-color:#91f21b;
color:#545e7a;
}
</style>
</head>
<body>
<div>
<a class="ghost" href="http://dotnetmodules.blogspot.in">Button</a>
</div>
</body>
</html>
0 comments:
Post a Comment