Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,193,985 members, 7,952,959 topics. Date: Thursday, 19 September 2024 at 08:16 AM |
Nairaland Forum / Science/Technology / Programming / Design HTML Button Using CSS (841 Views)
Rate My Design Using CSS And HTML Only (PICTURE) / Basic Web Design Html E-book / Thread For 15 Days Tutorial On Website Styling Using CSS (2) (3) (4)
(1) (Reply)
Design HTML Button Using CSS by skptricks: 5:38am On Feb 06, 2018 |
http://www.skptricks.com/2018/02/design-html-button-using-css.html Design HTML Button Using CSS by sumit kumar pradhan on February 06, 2018 February 06, 2018 in CSS, html, html5, web development This post explains How to create CSS buttons with the help of HTML. Lets see the complete examples for square, rounded, oval button etc. https://www.youtube.com/watch?v=0yMW-l1eGgw CSS Button Examples : Example :1 <html> <head> <style> /* Material style */ button { border: none; cursor: pointer; color: white; padding: 10px 30px; border-radius: 2px; font-size: 22px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); } .button1 { background: #ff4040; } .button2 { background: #ffa96b; } .button3 { background: #2196F3; } .button4 { background: #5cd38c; } /* Ripple magic */ button{ position: relative; overflow: hidden; margin :10px; } button:after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, .5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 20% { transform: scale(25, 25); opacity: 1; } 100% { opacity: 0; transform: scale(40, 40); } } button:focus:not(:active)::after { animation: ripple 1s ease-out; } </style> </head> <body> <button class="button1" >Click Me...</button> <button class="button2" > Click Me...</button> <button class="button3"> Click Me...</button> <button class="button4"> Click Me...</button> </body> </html> |
(1) (Reply)
Is There Any Oil Or Real Estate Investment App In Nigeria? / How To Insert Script Into Your Header And Footer / Codemint Just Launched The Version 2.0. Check It Out
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 9 |