With the use of coding skill like
HTML (Hypertext Markup Language),
CSS (Cascading Style Sheets) you can do anything on your browser.
This is another kind of new way to express the power of Front end coding. Here you can learn how to make “2D to 3D Button on Hover With CSS”.
You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.
If you don’t understand clearly so you can watch a youtube video which mentions the end of the page.
HTML
<a href="https://oncefollow.com/tech">Button</a>CSS
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #262626;
}
a {
position: relative;
padding: 20px 20px 20px 30px;
color: #f25f25f2;
font-size: 30px;
font-weight: 700;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 20px;
transition: 1s;
}
a:hover
{
background: red;
color:yellow;
transition-delay: .1s;
box-shadow: -30px 30px 50px rgba(151,92,104,0.9);
transform: rotate(-360deg) skewY(25deg);
}
a:before,
a:after
{
content: '';
position: absolute;
width: 2px;
height: 100%;
background: #fff;
pointer-events: none;
transform-style: linear;
transition-property: width, opacity, transform, box-shadow;
transition-duration: 0.5s;
}
a:before
{
top: 0px;
left: 0px;
}
a:after
{
top: 0px;
right: 0px;
}
a:hover:before
{
width: 100%;
opacity: 0.1;
transform: translate(5px, -5px);
box-shadow: +2px 2px 2px rgba(0,0,0,.1);
transition-delay: 0s, 0.5s, 1s, 1.5s;
}
a:hover:after
{
width: 100%;
opacity: 0.1;
transform: translate(10px, -10px);
box-shadow: +2px 2px 2px rgba(0,0,0,.1);
transition-delay: 0s, 0.5s, 1s, 1.5s;
}YouTube
Like Our Facebook Page For Update!
👇
HTML CSS JavaScript Coding
HTML CSS JavaScript Coding. 65 likes. Here you can enjoy videos about coding Like HTML CSS and JavaScript to build a stunning WebSite.
Read More👇
Border To Underline Pure With HTML & CSS
Make Snowfall using CSS & JAVASCRIPT
Google Chrome Logo Rotate Pure With CSS
Snow Falling Effect Only With CSS
Social Media in a Book With CSS
Happy Birthday – CountDown [CSS & JavaScript]
Hi. I have checked your oncefollow.com and i see you’ve got some duplicate content so probably it is the reason that you
don’t rank high in google. But you can fix this issue fast.
There is a tool that rewrites articles like human, just search
in google: miftolo’s tools