Multi Contact Button in Pure CSS
How do I make an multi contact button in pure css?
Testing out a contact fixed button for mobile. What is a multi contact button in pure css? How do you make a multi contact button in pure css? This script and codes were developed by Richard on 16 January 2023, Monday.
Multi Contact Button in Pure CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi Contact Button in Pure CSS</title> <script src="https://use.fontawesome.com/c334c419c0.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Sweet button, dude...</h1> <h2>I bet you can't click just once.</h2> <div class="btn-multi"> <input type="checkbox" id="multi-btn" name="multi-btn" /> <label for="multi-btn"> <a href="https://www.facebook.com/" class="btn btn-circle" target="_blank"><i class="fa fa-envelope icon" aria-hidden="true"></i></a> <a href="https://www.twitter.com/" class="btn btn-circle" target="_blank"><i class="fa fa-map-marker icon" aria-hidden="true"></i></a> <a href="https://www.google.com/" class="btn btn-circle" target="_blank"><i class="fa fa-phone icon" aria-hidden="true"></i></a> <span class="btn btn-circle"><i class="material-icons icon">close</i></span> <i class="material-icons icon">share</i> </label> </div>
</header>
<main> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sodales purus, a tempor mi. Nullam ac laoreet tortor. Vivamus ut congue neque, id rhoncus libero. Phasellus et accumsan diam. Pellentesque interdum urna eros, in venenatis lorem tincidunt a. Pellentesque euismod velit sed nunc consectetur vulputate. Sed posuere est id convallis elementum. Phasellus accumsan iaculis est, eu auctor purus mattis non. Phasellus pharetra ex ac lacus ullamcorper, eget tempus augue hendrerit. Vestibulum vitae lorem augue. Maecenas consectetur tempor turpis, nec imperdiet libero blandit ac. Mauris dignissim purus eu euismod mattis.</p> <p>Nulla eu condimentum eros. Curabitur vel metus in magna fringilla congue. Cras ac dictum lectus, vitae imperdiet libero. Mauris et neque nibh. Etiam auctor urna purus, in consectetur enim fermentum eget. Vivamus tincidunt massa sapien, sed fermentum lectus laoreet sed. Donec porttitor lacus sit amet metus facilisis, ac pretium magna venenatis. Ut libero nisi, volutpat id auctor at, congue in dui. Integer turpis sapien, cursus eu magna vel, posuere bibendum sapien.</p> <p>Nulla accumsan leo quis volutpat rhoncus. Integer nec porttitor ante, quis pharetra ipsum. Vivamus nulla nunc, commodo at commodo vel, placerat quis orci. Phasellus porta, purus vel ornare luctus, lorem nunc molestie nisi, sed fermentum purus nulla vel est. Nullam purus velit, vestibulum non velit sit amet, elementum auctor mauris. In non lobortis tellus. Maecenas fringilla, turpis eget luctus aliquam, sem ligula varius magna, sit amet dignissim tellus erat non neque. Fusce dignissim ipsum sed orci aliquam, a molestie magna egestas. In hac habitasse platea dictumst. Curabitur vel rhoncus elit, quis vulputate augue. Pellentesque ac pellentesque diam, eu feugiat velit. In sagittis ipsum eu velit malesuada, sed iaculis dui euismod. Vestibulum tempus metus et mollis posuere. Etiam lacinia, tellus vitae porttitor vulputate, neque purus rutrum lorem, non vehicula metus augue eu elit. Integer quis turpis quis justo molestie ultricies nec semper enim. In hac habitasse platea dictumst.</p>
</main>
</body>
</html>
Multi Contact Button in Pure CSS - Script Codes CSS Codes
body { margin: 0;
}
h1 { padding: 0; margin: 0; color: white; font-weight: lighter; font-family: 'Open sans', sans-serif; left: 15%; top: 50px; font-size: 2.5em; position: absolute;
}
h2 { font-family: 'open sans', sans-serif; font-weight: lighter; color: #fff; opacity: .5; position: absolute; left: 15%; top: 90px;
}
header { position: relative; width: 100%; height: 200px; background-color: #3f51b5;
}
header .btn-multi { position: absolute; z-index: 999; right: 15%; bottom: -54px;
}
.btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: 'Roboto', sans-serif; text-decoration: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; cursor: pointer; white-space: nowrap; padding: 8px 20px; font-size: 14px; background-color: #E91E63; border-radius: 2px; color: white; text-transform: uppercase; border: none; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; background-position: 50%; outline: none !important;
}
.btn.btn-circle { height: 50px; width: 50px; border-radius: 50%; padding: 0 !important; font-size: 18px;
}
.btn-multi input { display: none;
}
.btn-multi input:not(:checked) ~ label { -webkit-transform: rotate(0); transform: rotate(0);
}
.btn-multi input:not(:checked) ~ label .btn { border-radius: 0; height: 30px; width: 30px; box-shadow: none;
}
.btn-multi input:not(:checked) ~ label .btn:first-child { border-top-left-radius: 100%; -webkit-transform: translate(25px, 25px); transform: translate(25px, 25px); display: none;
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(2) { border-top-right-radius: 100%; -webkit-transform: translate(55px, 25px); transform: translate(55px, 25px); display: none;
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(3) { border-bottom-left-radius: 100%; -webkit-transform: translate(25px, 55px); transform: translate(25px, 55px); display: none;
}
.btn-multi input:not(:checked) ~ label .btn:nth-child(4) { border-radius: 100%; -webkit-transform: translate(26px, 28px); transform: translate(26px, 28px); width: 60px; height: 60px;
}
.btn-multi input:not(:checked) ~ label .btn .icon { opacity: 0;
}
.btn-multi input:not(:checked) ~ label > .icon { opacity: 1; cursor: pointer;
}
.btn-multi label { position: relative; height: 110px; width: 110px; display: block; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; cursor: default;
}
.btn-multi label .btn { position: absolute; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn-multi label .btn:nth-child(2) { -webkit-transform: translate(60px, 0); transform: translate(60px, 0);
}
.btn-multi label .btn:nth-child(3) { -webkit-transform: translate(0, 60px); transform: translate(0, 60px);
}
.btn-multi label .btn:nth-child(4) { -webkit-transform: translate(60px, 60px); transform: translate(60px, 60px);
}
.btn-multi label .btn .icon { opacity: 1; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.btn-multi label > .icon { color: white; position: absolute; font-size: 30px; left: calc(35%); top: calc(36%); opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.btn-multi label .icon { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
main { position: absolute; left: 15%; right: 15%; top: 250px; margin-bottom: 50px; font-family: 'open sans', sans-serif; font-weight: lighter;
}
Developer | Richard |
Username | keyboarddesk |
Uploaded | January 16, 2023 |
Rating | 3 |
Size | 3,640 Kb |
Views | 6,072 |
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!
Name | Size |
Richard Lococo -Assignment 6 - Canvas | 2,286 Kb |
ALPACA PRESENTATION | 2,578 Kb |
ICA adding mobile NAV | 3,739 Kb |
Double swipe button | 2,024 Kb |
Week 4 ICA | 2,725 Kb |
My attempt at Scrollspy | 2,517 Kb |
Looping background beach video | 1,547 Kb |
SVG animation introduction | 3,281 Kb |
Modal with triggered animation inside | 5,660 Kb |
Assignment 4 SCSS animations | 1,752 Kb |
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!
Name | Username | Size |
Fixed with using Calc | Tomleo | 2,542 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Shopping List | Markmurray | 6,015 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Simple content swap | Snografx | 1,859 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!