Design HTML Button Using CSS - Programming

Design HTML Button Using CSS - Programming - Nairaland

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

Design HTML Button Using CSS by skptricks(op): 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

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

In Need Of Web Designer And Developer? • Google Introduce The New Adsense Auto Ads (how It Works) • Database Wont Open Fully