A simple css3-based hover button and css3 hover button

Source: Internet
Author: User

A simple css3-based hover button and css3 hover button

Today we will share with you a simple CSS 3-based hover button. This hover button moves the mouse over the front border without interruption. The border interval disappears when the mouse passes. As follows:

Download Online Preview source code

Implementation code.

Html code:

  <div class="container">        <p>            Single gradient border</p>        <a href="#" class="btn">Click Me!</a> <a href="#" class="btn">Very long link text here</a>    </div>    <div class="container">        <p>            Pseudo elements at a fixed size. Nasty 1px drop on hover</p>        <a href="#" class="btn2">Click Me!</a> <a href="#" class="btn2">Very long link text            here</a>    </div>    <div class="container">        <p>            Multiple borders using pseudo elements with gradient borders</p>        <a href="#" class="btn3">Click Me!</a> <a href="#" class="btn3">Very long link text            here</a>    </div>    

Css3 code:

        body        {            font-family: "Courier New" , "Inconsolata" , monospace;            font-size: 18px;            line-height: 26px;            background: #333;            color: #fff;        }        h1        {            font-weight: 100;            font-size: 80px;            line-height: 90px;            text-align: center;        }        .container        {            width: 800px;            margin: 50px auto;            text-align: center;        }        .btnCommon        {            display: inline-block;            text-decoration: none;            color: #fff;            padding: 8px 16px;            margin: 0 10px;            border: 1px solid #fff;            letter-spacing: 1px;        }        .btnCommon:hover        {            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);        }        .btn        {            display: inline-block;            text-decoration: none;            color: #fff;            padding: 8px 16px;            margin: 0 10px;            border: 1px solid #fff;            letter-spacing: 1px;            border-image: linear-gradient(to right, #ffffff 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, #ffffff 85%) 1;            transition: all .2s;        }        .btn:hover        {            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);        }        .btn:hover        {            transition: all .2s;            background: rgba(255, 255, 255, 0.2);            border: 1px solid #fff;        }        .btn2        {            display: inline-block;            text-decoration: none;            color: #fff;            padding: 8px 16px;            margin: 0 10px;            border: 1px solid #fff;            letter-spacing: 1px;            border: none;            height: 40px;            line-height: 40px;            position: relative;            padding: 0;            margin: 0 25px;        }        .btn2:hover        {            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);        }        .btn2:before, .btn2:after        {            width: 15px;            border: 1px solid #fff;            position: absolute;            content: "";            height: 40px;            top: -1px;        }        .btn2:before        {            left: -16px;            border-right: none;        }        .btn2:after        {            right: -16px;            border-left: none;        }        .btn2:hover, .btn2:hover:before, .btn2:hover:after        {            transition: all .2s;            background: rgba(255, 255, 255, 0.2);            border-color: pink;        }        .btn2:hover        {            border: 1px solid pink;            border-width: 1px 0 1px 0;        }        .btn3        {            display: inline-block;            text-decoration: none;            color: #fff;            padding: 8px 16px;            margin: 0 10px;            border: 1px solid #fff;            letter-spacing: 1px;            position: relative;            border: 1px solid rgba(0, 0, 0, 0);            transition: all .2s;        }        .btn3:hover        {            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);        }        .btn3:before, .btn3:after        {            display: inline-block;            width: 100%;            height: 100%;            content: "";            position: absolute;            left: -1px;            top: -1px;            border-width: 1px;            transition: all .2s;        }        .btn3:before        {            border-image: linear-gradient(to right, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;        }        .btn3:after        {            border-image: linear-gradient(to left, #ffffff 30px, rgba(0, 0, 0, 0) 16px) 1;        }        .btn3:hover        {            transition: all .2s;            background: rgba(255, 255, 255, 0.2);        }        .btn3:hover:before, .btn3:hover:after        {            border: 1px solid rgba(0, 0, 0, 0);            transition: all .2s;        }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/9826


To make a hover effect in VB, the caption attribute of the button changes to "hover effect" when the cursor is over the button ",

Private Sub Command1_MouseMove (Button As Integer, Shift As Integer, X As Single, Y As Single)
Command1.Caption = "hover effect"
End Sub
Private Sub Form_MouseMove (Button As Integer, Shift As Integer, X As Single, Y As Single)
Command1.Caption = "normal effect"
End Sub

: Code: When you hover or click a button on a webpage, the button may have different effects, such as Concave

Make three images in three statuses, and search for the css background replacement technology.

Others:
. Xxx a {background image 1}
. Xxx a: hover {background image 2}

Asking for help is better than asking for help. Search for help by yourself...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.