Friday, March 5, 2021

CSS Pure Css Push Effect Css Button Code

   
CSS Push Effect

Pure Pushing Effect Css Button Code for your Web Application. You can use this for sign-in and signup submit buttons, are download button. Using this code no need for any other plugin or any script to call this code you can simply add the CSS code and use the button.

Button

Css Part:

.red a{
position: relative;
background-color: #d40707;
background: #f85032;
background: linear-gradient(to bottom, #f85032 0%, #f16f5c 35%, #f6290c 41%, #f02f17 80%, #e73827 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );
padding: 20px;
border-radius: 8px;
box-shadow: 0px 9px 0px rgba(191,0,0,1), 0px 9px 25px rgba(0,0,0,.7);
font-weight:bold;
font-size:45px; 
color:#fff;
text-align: center;
text-decoration:none;
transition: all .1s ease;
display:inline-block;
}
.red a:active {
color:#fff;
box-shadow: 0px 3px 0px rgba(191,0,0,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}

HTML Part:

<div class="red"><a href="#">Push Button</a></div>

No comments:

Post a Comment