Kumar Lakshmanan
Home
Features
More
Home
Buttons
Fresh CSS Button Version-3
Fresh CSS Button Version-3
Kumar Lakshmanan
11:04 AM
Buttons
Document
Real time example
HOVER ME
Inspect this HTML Source Code
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{text-align: center;outline:none}body{color:#58595b;font-family:"Roboto",sans-serif;font-weight:300;font-size:25px;min-width:320px;overflow-x:hidden} a{color:#3f3e3e}a:hover,a:focus{text-decoration:none;color:#b54228;outline:none} p{color:#3f3e3e;text-transform:uppercase}p{color:#3f3e3e;text-transform:uppercase;font-weight:500} .header_link{text-transform:uppercase;color:#3f3e3e;font-size:30px;margin:0 32px;position:relative;padding:8px 5px;width:230px;display:inline-block;font-weight:700;box-sizing:border-box;text-align:center;white-space:nowrap} .header_link span{position:absolute;border:2px solid #b54228;content:"";font-size:16px;z-index:1;margin:0 5px;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:#fff;top:55px;left:218px;transition:margin-top .13s linear,left .25s linear .13s,top .25s ease-in .36s} .header_link::after,.header_link::before{box-sizing:border-box;content:"";margin-bottom: -6px; position:absolute} .header_link::before{bottom:0;left:0;width:100%;border:2px solid transparent;height:1px;border-bottom-color:#b54228;transition:height .25s linear .38s,border-color 0s ease-in .66s} .header_link::after{top:0;right:0;border:2px solid transparent;width:0;height:0;transition:height .13s linear,width .25s linear .13s,border-color 0s linear .38s} .header_link:hover span{top:0;left:-8px;margin-top:42px;transition:top .25s linear,left .25s linear .25s,margin-top .13s ease-in .5s} .header_link:hover::before{height:57px; border-right-color:#b54228;transition:height .25s linear} .header_link:hover::after{width:100%;height:40px;border-top-color:#b54228;border-left-color:#b54228;transition:border-color 0s linear .25s,width .25s linear .25s,height .13s ease-in .5s} @media only screen and (max-width: 800px){.header_link{font-size:20px}.header_link:hover::before{height:45px}.header_link span{top:48px}} </style> <body> <div class="content_header"> <p> <a class="header_link" >HOVER ME <span></span> </a> </p> </div> </body> </html>
Download this HTML Source Code
HTML Source File
Also Read
Pre Loader Version-2
Image Slideshow Version-2
Sunlight Effect Button
12 Modal Checkboxes
Buttons
HTML CSS JS
Post a Comment
0 Comments
Labels
Buttons
(6)
Calculator
(3)
Clock
(2)
Entertainment
(2)
Forms
(6)
HTML CSS JS
(26)
Javascript points
(9)
Love
(2)
Menu HamBurger
(2)
Pre Loaders
(4)
Tamil News
(2)
Join Our Whatsapp Group
Join
Search This Blog
Popular Posts
Disco Lights Animation using CSS
Best PDF books for web designing and developing
St.Mary's HSS | My School
Make the Loader Using HTML & CSS
Total Pageviews
Contact Form
Name
Email
*
Message
*
0 Comments