Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,143,481 members, 7,781,437 topics. Date: Friday, 29 March 2024 at 02:24 PM

Design HTML Button Using CSS - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Design HTML Button Using CSS (817 Views)

Rate My Design Using CSS And HTML Only (PICTURE) / Thread For 15 Days Tutorial On Website Styling Using CSS / Creating An Arrow Box Like Chat Application 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)

Get The Latest Website Script For Crypto Investment - Forex- Option Trading / Learn How To Make Web Applications From Scratch The Right Way / Please I Need Advice

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