Currently working on creating a button using html5 and css3. My goal is to implement a hover animation similar to the one shown in this example.
The desired effect is for a white circle to expand from the center when the mouse hovers over the button, with the button text displayed inside the circle in black font color for better readability. I have attempted placing a div inside the button element but have struggled to align the black text correctly with the button text.
This method works effectively without the need for JavaScript or animations, relying solely on transitions.
I achieved this by utilizing both an inner element and a pseudo-element within the inner element. While it presents an interesting concept, adjusting it can be challenging due to many hardcoded values based on the height of the element. Utilizing a preprocessor like SCSS would greatly simplify the process of manipulation.
Below is the code, which may benefit from some tidying up:
/* HTML */
<div class='outer'>
Contacts
<div class='innerCircle'></div>
</div>
/* CSS */
.outer {
width:150px; height:50px;
border-radius:10px;
background:blue;
text-align:center;
color:white;
line-height:50px;
position:relative;
}
.innerCircle {
position:absolute;
top:50%; left:50%;
background:white;
color:black;
overflow:hidden;
border-radius:50%;
transition:all .5s;
height:0; width:0;
padding-left:-10px;
}
.innerCircle:before {
content:'Contacts';
position:absolute;
margin-left:-2px;
transition:all .5s;
transform:translateX(-25px);
top:-25px;
}
.outer:hover .innerCircle {
margin-left:-25px;
top:0;
height:50px; width:50px;
}
.outer:hover .innerCircle:before {
top:0px;
}
Summary: Seeking assistance in implementing a button that triggers three different actions upon being clicked thrice. Detailed description: On one page of my website, there is an introduction with text and images. I currently have a button that switches t ...
Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...
I am encountering an issue when trying to connect my login page from the navbar. Here is the code snippet for the navbar that I have: <div class="navbar-container"> <ul id="slide-out" class="side-nav center-align"> <li> <d ...
I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...
I need help figuring this out as it's been quite challenging for me. Could someone else take a look and provide some insight? There are SVGs included in my HTML file, but they aren't showing up on the screen. I've tried adjusting the viewBo ...
The issue lies in the background image not displaying despite trying different methods such as using ""bg-[url('/image/example.jpeg')"" tailwind.config.js theme: { extend: { colors: { darkBlue: "#0 ...
When I compare how my application looks in IE versus Chrome and Firefox, it seems like there are styling issues. I want to address this problem. I attempted to use the IE developer tool but couldn't find any options to customize styles and CSS. How d ...
My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...
I am currently working on transforming an image both vertically and horizontally, as well as scaling it using JavaScript. While I have managed to resize the image successfully, it doesn't quite look how I want it to. I am aiming for a similar effect a ...
I'm currently working on a project that involves uploading pictures and displaying them as thumbnails or avatars after they have been uploaded. I've written the code below, which successfully uploads the picture, but I'm struggling to displa ...
Currently, I am developing a customized focus method for my webpage using the following script: <script type="text/javascript"> function myFunction() { document.getElementById("name").focus(); } </script> I ...
My Mysql data is structured as follows: name sub ---------------- a maths a science a history b maths b science a computer a english c computer c history b history c maths I want to pre ...
https://i.sstatic.net/Bg0Gy.png I am currently working on developing a shipment tracker using Angular, HTML5, and CSS3. Does anyone have any suggestions on how to dynamically create the shipment tracker using AngularJS? My initial plan is to incorporate ...
I am trying to align 3 divs inside a flex container in the center of the page with equal distance between them and also from the edge of the page. .container { display : flex; width : 60%; } .para { width : 33%; padding : 1em; borde ...
Here is the link to my code: http://jsfiddle.net/yHPTv/2491/ I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly. .blo ...
Today, I am facing a challenge. I have an HTML Form that can contain a variable number of HTML Input Fields for email addresses. I am using Javascript to process this data and to post it via XMLHttpRequest. To fetch the input fields, I use the following c ...
I am currently struggling with understanding how to correctly use the line break tag in HTML. During a recent class test, we were tasked with identifying issues within an HTML script, and I mistakenly believed that < /br> was incorrect. I am unsure ...
Currently, I am in the process of gathering all href's from a div with the class 'server-name' on disboard.org/. Source-Code: def gather_links(): url = 'https://disboard.org/search?keyword=hacking' response = requests.get ...
I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...
Retrieving data from a server (potentially on another domain) is straightforward when it comes to images: <img src="http://www.example.com/test.jpg" /> This process does not result in any CrossOrigin issues. However, when attempting to fetch text ...