October 17, 2021

Css hover button effect

<div class="buttonHover"> <svg height="45" width="100%" xmlns="#">
       <rect id="cssButton_button1" height="45" width="100%"></rect>
       </svg><div id="cssButton_text"> <a href="">Sample Button</a> </div>
        </div>
     <!--End of Button 1 -->
     <div class="buttonHover"> <svg height="45" width="100%" xmlns="#">
       <rect id="cssButton_button2" height="45" width="100%"></rect>
       </svg><div id="cssButton_text"> <a href="">Sample Button</a> </div>
        </div>
     <!--End of Button 2 -->
     <div class="buttonHover"> <svg height="45" width="100%" xmlns="#">
       <rect id="cssButton_button3" height="45" width="100%"></rect>
       </svg><div id="cssButton_text"> <a href="">Sample Button</a> </div>
        </div>
     <!--End of Button 3 -->
     <div class="buttonHover"> <svg height="45" width="100%" xmlns="#">
       <rect id="cssButton_button4" height="45" width="100%"></rect>
       </svg><div id="cssButton_text"> <a href="">Sample Button</a> </div>
        </div>

 

.buttonHover {
float:left;
width:auto;
line-height: 45px;
display: inline-block;
margin-right:2em;
text-align:center; max-width:150px;
}
#cssButton_button1 {
stroke-width: 6px;
fill: transparent;
stroke: #666666;
stroke-dasharray: 85 400;
stroke-dashoffset: -228;
transition: 1s all ease;
}
.buttonHover:hover #cssButton_button1 {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #666666;
}

#cssButton_text {
margin-top:-60px;
text-align: center;
}

#cssButton_text a {
color: #333;
text-decoration: none;
font-weight:400;
}

/*button 2*/

#cssButton_button2 {
stroke-width: 6px;
fill: transparent;
stroke: #ffd311 ;
stroke-dasharray: 85 400;
stroke-dashoffset: -228;
transition: 1s all ease;
}
.buttonHover:hover #cssButton_button2 {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #ffd311;
}

/*button 3*/

#cssButton_button3 {
stroke-width: 6px;
fill: transparent;
stroke: #dd483f ;
stroke-dasharray: 85 400;
stroke-dashoffset: -228;
transition: 1s all ease;
}
.buttonHover:hover #cssButton_button3 {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #dd483f;
}

/*button 4*/

#cssButton_button4 {
stroke-width: 6px;
fill: transparent;
stroke: #56c5ff;
stroke-dasharray: 85 400;
stroke-dashoffset: -228;
transition: 1s all ease;
}
.buttonHover:hover #cssButton_button4 {
stroke-dasharray: 50 0;
stroke-width: 3px;
stroke-dashoffset: 0;
stroke: #56c5ff;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *