Tuesday, March 21, 2017

How To Make Semi-Transparent Buttons

                No comments   

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>

0 comments:

Post a Comment

Popular Posts