Button hover

Developer
Anthony
Size
2,867 Kb
Views
10,120
  1. Button hover Previews
  2. Button hover HTML Codes
  3. Button hover CSS Codes

How do I make an button hover?

Button hover experimentation. What is a button hover? How do you make a button hover? This script and codes were developed by Anthony on 04 January 2023, Wednesday.

Button hover Previews
IQ Test

Button hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:700,400'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="button"> <span>Hello, Tonours !</span>
</button>
</body>
</html>

Button hover - Script Codes CSS Codes

body { background: #10A6D1; margin: 80px; font-family: 'Open Sans', sans-serif; text-align: center;
}
.button { padding: 10px 25px; border: 0; background: transparent; background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #ffcf10 51%, #ffcf10 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, #ffcf10 51%, #ffcf10 100%); background-size: 200% 200%; position: relative; border: 1px solid #FFFFFF; outline: none; font-size: 14px; text-transform: uppercase; font-weight: 700; color: #FFFFFF; -webkit-transition: background-position .25s ease-in .3s; transition: background-position .25s ease-in .3s;
}
.button::before, .button::after { content: ''; height: 50%; width: 1px; background: #10A6D1; display: block; position: absolute; -webkit-transition: -webkit-transform 250ms linear 400ms; transition: -webkit-transform 250ms linear 400ms; transition: transform 250ms linear 400ms; transition: transform 250ms linear 400ms, -webkit-transform 250ms linear 400ms;
}
.button::before { bottom: 0; left: -1px;
}
.button::after { top: 0; right: -1px;
}
.button span { position: relative; overflow: hidden; -webkit-transition: color 0s linear 470ms; transition: color 0s linear 470ms;
}
.button span::after { content: 'Hello, Tonours !'; position: absolute; top: 0; left: 0; color: #ffcf10; display: block; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: opacity 0s linear 425ms, -webkit-transform .2s linear .425s; transition: opacity 0s linear 425ms, -webkit-transform .2s linear .425s; transition: transform .2s linear .425s, opacity 0s linear 425ms; transition: transform .2s linear .425s, opacity 0s linear 425ms, -webkit-transform .2s linear .425s; opacity: 0;
}
.button:hover, .button:focus { background-position: 0% 200%; cursor: pointer;
}
.button:hover::before, .button:focus::before { -webkit-transform: translateY(105%); transform: translateY(105%);
}
.button:hover::after, .button:focus::after { -webkit-transform: translateY(-105%); transform: translateY(-105%);
}
.button:hover span, .button:focus span { color: #10A6D1;
}
.button:hover span::after, .button:focus span::after { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: opacity 0s linear 500ms, -webkit-transform .2s linear 0s; transition: opacity 0s linear 500ms, -webkit-transform .2s linear 0s; transition: transform .2s linear 0s, opacity 0s linear 500ms; transition: transform .2s linear 0s, opacity 0s linear 500ms, -webkit-transform .2s linear 0s;
}
Button hover - Script Codes
Button hover - Script Codes
Home Page Home
Developer Anthony
Username Tonours
Uploaded January 04, 2023
Rating 3
Size 2,867 Kb
Views 10,120
Do you need developer help for Button hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony (Tonours) Script Codes
Name
Svg animation test
Fail vibration
Bender edit profile
A Pen by Anthony
Remember MSN Wizz
Send button effect
Background Animation
SVG fill animation
Simple form input effect
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!