Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,057 members, 7,953,195 topics. Date: Thursday, 19 September 2024 at 12:11 PM |
Nairaland Forum / Science/Technology / Programming / Design HTML Button Using CSS (842 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)
Free Blogging Training On Whatsapp - 08050644154 / Get Free Website Design / Get The Latest Website Script For Crypto Investment - Forex- Option Trading
(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 |