Use the before and: after pseudo classes to create a CSS3 circular button and css3
Preview:
Procedure:
1.
The following code uses the CSS3 prefix-free script prefixfree. js, saving the prefix "-moz", "-webkit", "-o", and "-ms" in CSS3"
<Head> <meta charset = "UTF-8"> <title> button </title> <script src = "js/jquery. js "type =" text/javascript "> </script> <script src =" js/prefixfree. min. js "type =" text/javascript "> </script> <link rel =" stylesheet "type =" text/css "href =" css/button.css "/> <script type = "text/javascript">/* try the fade-in effect here */$ (function () {$ (". bt "mirror.css (" opacity "," 1 ") ;}); </script>
2. <body> tag Structure
<Body> <div class = "bt"> <div class = "button"> </div> <div class = "button2"> </div> <div> *{ padding: 0; margin: 0;}/* clear floating */. clearfix: after {content: ""; display: table; clear: both;} html, body {height: 100%;} body {font-family: "Microsoft YaHei"; background: # E1E1E1; font-weight: 300; font-size: 15px; color: #333; overflow: hidden;} a {text-decoration: none ;} /* No extension of Button shadow */. bt {margin: 100px auto; display: block; width: 350px; opacity: 0; border-bottom: 1px solid # C5C5C5; border-top: 1px solid # C5C5C5; box-shadow: 0 1px 0 # F6F6F6, 0 1px 0 # F6F6F6 inset; transition: all 0.5 s elapsed-in ;}. button: before ,. button2: before {content: ""; width: 130px; height: 130px; display: block; z-index:-1; position: relative; background: # ddd; left: -15px; top:-15px; border-radius: 65px; box-shadow: inset 2px 2px 4px rgba (0.4, 0 );}. button: after ,. button2: after {content: "register"; color: # 09F; font-size: 20px; width: 100%; height: 100%; line-height: 100px; text-align: center; position: absolute; top: 0; display: block ;}. button2: after {content: "login"; word-spacing: 25px; color: # A0D989 ;}. button ,. button2 {float: left; margin: 50px auto; cursor: pointer; height: 100px; width: 100px; display: block; position: relative; color: black; text-align: center; line-height: 100px; border-radius: 50px; box-shadow: 2px 2px 4px rgba (0.4, 0,); background: # FFF; transition: all 0.5 s bytes-in ;}. button {float: left ;}. button2 {float: right ;}
OK. production is complete. Isn't it easy for people to lift their spirits? Try it now. I again stated that the demo address has been provided at the beginning of the article. Please check it out.
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
