Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,194,057 members, 7,953,195 topics. Date: Thursday, 19 September 2024 at 12:11 PM

Design HTML Button Using CSS - Programming - Nairaland

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
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.