Looking to design a Floating Action button that displays a circular menuhttps://i.sstatic.net/D3JOU.jpg
Do you think it's achievable using solely css?
Looking to design a Floating Action button that displays a circular menuhttps://i.sstatic.net/D3JOU.jpg
Do you think it's achievable using solely css?
If you want to change the icons, make sure to select from the icons available on the font-awesome page and replace the class name with the respective icon.
.main{
color:#222;
z-index:1000;
position:absolute;
width:45px;
height:45px;
bottom:50px;
float:right;
right:200px;
display: table-cell;
vertical-align: middle;
background-color:#00affd;
text-align: center;
box-shadow:1px 2px 10px #555;
border-radius:100%;
color:#fff;
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
cursor:pointer;
}
.main{
line-height:45px !important;
}
.main:focus > .cir {
opacity:1;
width:100px;
height:100px;
transform-style: preserve-3d;
}
p{
opacity:0;
position: relative;
float: right;
left: -58px;
/* width: 50px; */
line-height: normal;
top: -60px;
padding: 2px 10px;
height: 20px;
border-radius: 3px;
background: #9E9E9E;
box-shadow:1px 2px 10px #555;
}
.main:hover > p{
opacity:1;
}
.cir{
z-index:2;
opacity:0;
position:absolute;
right:50%;
bottom:50%;
width:10px;
height:10px;
border-radius:100%;
transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
*{outline:none;}<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<div class="main" tabindex="1">X
<div class="cir">
<a class="main fa fa-user-circle " style="left:80%;bottom:90%;"><p>contact</p></a>
<a class="main fa fa-whatsapp" style="left:30%;bottom:55%;"><p>WhatsApp</p></a>
<a class="main fa fa-twitter-square" style="left:5%;bottom:10%;"><p>Twitter</p></a>
<a class="main fa fa-google-plus" style="left:-15%;bottom:-40%;"><p>Google</p></a>
</div>
</div>I've encountered a problem with the CSRF token when using a Handlebars each loop. I created a data table using the each loop but I'm unable to submit the delete button. The CSRF token only seems to work for submitting new data (POST) and updating ...
Looking to create a quiz form where I can track how long it takes users to input/select answers. I attempted the following code but the timing seems off: $('input, select').on('focus', function(event) { el = $(this); name ...
After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...
I am having trouble displaying 33 and 123 of heading 1 and heading 2 in a new row. Can someone please help me with this issue? Even though I updated the code, the for loop is only showing the last value. $.ajax({ type:"POST", url:"{{route(&ap ...
div ul li a.button:hover { text-color:#FF0000; background: #0040FF; } I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the co ...
I have implemented a Vue.js script to fetch JSON data through an AJAX request. However, I am encountering issues with the code. <script> new Vue({ el: '#feed' , data: { details: [], }, mounted() { this.$nextTick(fu ...
Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...
I'm currently implementing Vue 3 into my project. Within the database, there are a total of 10 individuals, each of which should have their own card displayed. Users have the ability to add any person to their list of favorites. Below is the code snip ...
When using valueChanges() in AngularFire to subscribe to Firestore data, I encountered an issue where obtaining the last document reference for pagination was not as straightforward as when using onSnapshot. Unfortunately, the approach I was using with o ...
I'm currently tackling the NextJS framework, and I'm having trouble importing images that are stored in the public folder. Despite being able to navigate through folders, the images aren't displaying as expected. Here is the import line and ...
Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...
I've been working on an MVC project and decided to integrate a Bootstrap theme called Argon. I included all the necessary Argon CSS and JavaScript files in Bundle.Config and successfully integrated them, allowing me to make use of Argon HTML elements. ...
Currently, I am working on creating transparent images using canvas in HTML5 and I would like to incorporate borders into them. The issue I'm facing is that the "Stroke" property does not consider the transparency of the image and applies it as if it ...
Is there a way to achieve this effect using only CSS (not CSS3) so that it is supported by all browsers? https://i.sstatic.net/XcWEh.png I am looking to create a div with shadows on all sides, where the top area will be used for navigation. I have tried s ...
I currently have a setup where each user has their own table containing items, with input fields for adding new items. When the "Add" button is clicked, the new item gets sent to the database and displayed in the table. This setup works flawlessly for a si ...
I've been attempting to merge two if functions together but I keep encountering errors. Despite trying different methods, I have not been successful in combining them. My goal is to check if the body has a specific class and if it does, I want to unc ...
After loading a JSON file as a string, attempting to parse it back to JSON and send it as a response: router.get('/todos', (req,res) =>{ let todos = fs.readFile('todos.json', 'utf8',(err, data) =>{ if (err) ...
Currently, I've progressed in my Vue development journey and started exploring the implementation of Vuex for state management. In the past, I had a main Vue component that handled search functionality, an array of items to iterate over, and the iter ...
Utilizing the flickity carousel, I have crafted an example which can be found at this link to codepen.io. Here is the CSS code that has been implemented: CSS .image-hoover { overflow: hidden; } .image-hoover img { -moz-transform: scale(1.02); -web ...
Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...