Button with sliding information

Developer
Miro Karilahti
Size
2,387 Kb
Views
36,432
  1. Button with sliding information Previews
  2. Button with sliding information HTML Codes
  3. Button with sliding information CSS Codes

How do I make an button with sliding information?

The button shows you more information when you hover it.. What is a button with sliding information? How do you make a button with sliding information? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Button with sliding information Previews
IQ Test

Button with sliding information - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button with sliding information</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="face-button" href="#"> <div class="face-primary"> <span class="icon fa fa-cloud"></span> Download </div> <div class="face-secondary"> <span class="icon fa fa-hdd-o"></span> Size: 52 kt </div>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Button with sliding information - Script Codes CSS Codes

@import url("//fonts.googleapis.com/css?family=Roboto:500");
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
body { padding: 64px 0; text-align: center;
}
.face-button { height: 64px; display: inline-block; border: 3px solid #e43; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; text-align: center; text-decoration: none; color: #e43; overflow: hidden;
}
.face-button .icon { margin-right: 6px;
}
.face-button .face-primary,
.face-button .face-secondary { display: block; padding: 0 32px; line-height: 64px; transition: margin .4s;
}
.face-button .face-primary { background-color: #e43; color: #fff;
}
.face-button:hover .face-primary { margin-top: -64px;
}
Button with sliding information - Script Codes
Button with sliding information - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 4.5
Size 2,387 Kb
Views 36,432
Do you need developer help for Button with sliding information?

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!

Miro Karilahti (miroot) Script Codes
Name
Flat Text Editor
Pure CSS Gallery
Calendar
Expanding Photo Stack
Simple personal profile
Navigation
Social Icons
Login Form
Flat sidebar
Long Shadow Calendar Icon
Create amazing SEO content 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!