Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,193,985 members, 7,952,959 topics. Date: Thursday, 19 September 2024 at 08:16 AM

Design HTML Button Using CSS - Programming - Nairaland

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