Multi Contact Button in Pure CSS

Developer
Richard
Size
3,640 Kb
Views
6,072
  1. Multi Contact Button in Pure CSS Previews
  2. Multi Contact Button in Pure CSS HTML Codes
  3. Multi Contact Button in Pure CSS CSS Codes

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 Previews
IQ Test

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;
}
Multi Contact Button in Pure CSS - Script Codes
Multi Contact Button in Pure CSS - Script Codes
Home Page Home
Developer Richard
Username keyboarddesk
Uploaded January 16, 2023
Rating 3
Size 3,640 Kb
Views 6,072
Do you need developer help for Multi Contact Button in Pure CSS?

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!

Richard (keyboarddesk) Script Codes
Name
Week 4 ICA
Expandable horizontal columns
Playing with AFC tabs nav
Background inside text
Assignment 4 SCSS animation
Card display using foundation
Index transfer
Looping background beach video
In class Week 4 - Mobile Navigation Patterns-Footer Nav
Double swipe button
Create amazing video scripts 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!