Tuesday, February 6, 2018

Design HTML Button Using CSS

This post explains How to create CSS buttons with the help of HTML. Lets see the complete examples for square, rounded, oval button etc.


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>

Output:

Example : 2

<html>
<head>
<style>
/* Material style */
button {
  border: none;
  cursor: pointer;
  color: white;
  padding: 10px 30px;
  border-radius: 50%;
  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>

Output:
Example : 3

<html>
<head>
<style>
/* Material style */
button {
  border: none;
  cursor: pointer;
  color: white;
  padding: 10px 30px;
  border-radius: 50%;
  font-size: 22px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
  width:150px;
  height:150px;
  
}
.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>

Output:

Example : 4

<html>
<head>
<style>
/* Material style */
button {
    background-color: rgb(255, 87, 51);
    padding: 10px 40px;
    color: #FFF;
    border: #739690 1px solid;
    border-radius: 4px;
    cursor: pointer;
 font-size :20px;
}
.button1 {
  background: #FF5733;
}
.button2 {
  background: #DAF7A6;
}
.button3 {
  background: #FF00BD;
}
.button4 {
  background: #900C3F;
}


/* Ripple magic */
button{
  position: relative;
  overflow: hidden;
  margin :10px;
}



</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>

Output:
This is all about CSS button design. Let me know your query in comment section if any ?

Downwload Link :
https://github.com/skptricks/php-Tutorials/tree/master/Design%20HTML%20Button%20Using%20CSS




No comments:

Post a Comment