Home > Developer > Web Develop
Pure CSS implements the cool send button and css Cool Button
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert
Today, I strolled around Dribble, and occasionally saw a good sending effect. I implemented it with pure css. The final effect is as follows.
----------------
----------------------------------------
Click here for online research, and click here for download and favorites.
----------------------------------------
---------------
To create this case, you must have
1. Checkbox: checked pseudo-class simulation implementation CSS Click Event
2. CSS3 transform and transition
3. self-fulfilling impulse and patience
Let's get down to the truth.
In the html section, we need to use label and input [type = "checkbox"] to Implement CSS click events. div # btnPlane and div # btnOk are required to carry the "aircraft" and "check" respectively ".
<div class="btnContainer"> <label id="btnLabel" for="btnInput"></label> <input type="checkbox" id="btnInput" name="btnInput" /> <div id="btnPlane"></div> <div id="btnOk"></div></div>
The CSS code is as follows: Use CSSReset and prefix-free.
/** Page box attribute settings, page background color settings **/div {box-sizing: border-box;} body {background: # FF7F50 ;} /** button container settings * size, horizontal vertical center display, rounded corner, and overflow settings **/. btnContainer {width: 100px; height: 100px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 2px solid # fff; border-radius: 50%; overflow: hidden;/* when border-radius is fixed, the overflow of webkit kernel: hidden */-webkit-mask-image: -webkit-radial-gradient (circle, whitelist 100%, bl Ack 100%);}/** tag setting * the same size as the container, mouse setting, and hierarchical setting **/. btnContainer # btnLabel {display: block; width: 100px; height: 100px; cursor: pointer; position: absolute; z-index: 100 ;} /** check box setting * Hide **/. btnContainer input [type = "checkbox"] {display: none;}/** * size, background, and transition settings **/. btnContainer # btnPlane {width: 100px; height: 100px; background: url (https:// I .cloudup.com/gBzAn-oW_S-2000x2000.png) center no-re Peat; background-size: 50%; transition: all 2 s;}/** check box setting * size, background setting, location setting, and transition setting **/. btnContainer # btnOk {width: 100px; height: 100px; background: url (https:// I .cloudup.com/2ZAX3hVsBE-3000x3000.png) center no-repeat; background-size: 20%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: all. 5 s ease 1 s;}/** response settings * click "airplane" and check **/. btnContainer input [type = "Checkbox"]: checked ~ # BtnPlane {transform: translate (100px,-100px);}. btnContainer input [type = "checkbox"]: checked ~ # BtnOk {opacity: 1 ;}
Here, we need to pay attention to a chrome browser bug. When setting border-radius in chrome browser, overflow: Den den will expire in the rounded corner, which is corrected in this article. Enjoy it.
----------------------------------------------------------
Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------
<A class = "yourcssclass" style = "background: url(biaoqing.png) left top no-repeat; padding-left: 2px; "> Follow </a> the width of the picture is the left margin width in your padding-left.
Help: How to Implement the effect of changing the image by clicking the button in css
Css alone cannot implement such a function. It must be used with JavaScript. Does your button use a background image? In this case, you need to write a clik event for the button, and then implement this button to change the css style. The following code is for your reference:
<Html>
<Head>
<Style>
. A {background: # F00 ;}
. B {background: #0F0 ;}
</Style>
<Script>
Var I = 0;
Function change ()
{
If (I ){
Document. getElementById ("btn"). className = "";
I = 0;
}
Else {
Document. getElementById ("btn"). className = "B ";
I = 1;
}
}
</Script>
</Head>
<Body>
<Input id = "btn" type = "button" class = "a" value = "click me" onClick = "change ()">
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
