I want to design a CSS-based 'button' that looks like this:
The blue color is just the background, so I am focusing on the "Welcome" text and the rectangle displayed below it.
When the button is active or hovered over, I want a rectangle to appear BELOW the button.
Here is the HTML code for the button:
<li><a href="#" id="welcome">Welcome</a></li>
To achieve the desired effect without causing jumping, you can use a border-bottom on :hover: Additionally, you can apply a border initially to prevent any sudden changes.
a {
border-bottom: 5px solid transparent;
}
a:hover {
border-color: blue
}
Please note that the code provided may not cover all scenarios.
-Sven
UPDATE: Another approach is to apply the style directly to the list element as shown in the other answer.
Here is a simple code to create an attractive link:
HTML:
<div class="custom-link"><a href="#">Welcome</a></div>
CSS:
.custom-link { background-color:#379AE6; width:100%; padding:8px; padding-bottom:16px; }
.custom-link a{ font-family:arial; text-decoration:none; color:#fff;
}
.custom-link a:hover{ border-bottom:8px solid #6BBBF8; padding-bottom:8px;
}
If you have this HTML code:
<li><a href="#" id="welkom">Welcome</a></li>
You can apply the following CSS:
li:hover,li:active{
border-bottom:3px solid blue; /*choose your desired color*/
}
Here is a response to a comment with another fiddle: Fiddle 2
The example above utilizes the box-align property(http://www.w3schools.com/cssref/css3_pr_box-align.asp) to center the bottom border effortlessly. However, it may not function in IE9 and older versions.
Fiddle 3: This solution works in all browsers but requires adjusting the alignment of the bottom using relative positioning for both the li and a elements within.
I need assistance with aligning two divs next to each other, both containing images. The goal is for the divs to remain side by side and for the images to automatically resize based on the screen size. When the screen size is reduced, I want the images t ...
I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...
Is it possible to achieve a specific layout using CSS where there is text inside a centered div, and underneath that, another div with right-aligned text? I'm unsure if this can be done effectively. I am currently unaware of how to accomplish this us ...
I'm looking to improve the scrolling functionality of this multi-item carousel. Currently, when clicked, it jumps to the next item instead of smoothly transitioning. I am seeking a way to make it transition or ease into the next section smoothly. < ...
Please complete the following two steps: Click on the input to focus on it Then click on the button $("input").on({ focusout: function() { this.value += "one|"; } }); $("button").on("click", function(){ $old_val = $("input").val(); $( ...
Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...
My website and MySQL database are both set to use UTF-8 encoding. An issue I am encountering is that when retrieving text from the MySQL database to display on the website, I need to utilize the PHP function mb_convert_encoding(@db_field,'utf-8' ...
I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...
Struggling to vertically align three items in a row using Material UI's Grid component. Despite setting "justifyContent: 'center'," it only horizontally centers the items. Here are my styles: const styles = (theme) => ({ root: { te ...
Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...
While making CSS modifications with Firebug and FireDiff, I've encountered a few mishaps where I mistakenly saved a diff instead of the complete snapshot. This resulted in uploading only one or two changes to my web server and overwriting the entire C ...
Is there a popular slider component that many startups are using, or are these types of sliders typically built from scratch? It seems like they are everywhere on startup websites. I would appreciate it if someone could point me in the right direction with ...
I am a newcomer to this website, and as a programmer, I consider myself to be at a beginner to intermediate level. I am new to Java and have to work with JSP for a University course. I am encountering an error and would like help in identifying what is wro ...
How can I retrieve objects by filtering the key value within the object? In the example below, I need to extract data only with session_id:23. data = [{ name: "First Name", session_id : "23", login: "date" }, { name: "Second Name", ...
Encountering an issue with my project involving a timetable that allows for dynamically adding rows with Jquery. The following are the codes: <?php session_start(); ?> <html lang="es"> <head> <meta charset="iso-8859-1"> ...
My goal is to create a JavaScript functionality where clicking on a button reveals the next div, followed by subsequent ones. Essentially, it's a 'next' button with the option for a 'previous' button as well. I've exhausted a ...
How can I create a tooltip with dynamically added tooltip content div requiring a role link for the aria label to be appended as needed? The initial HTML of the tooltip before expansion is: <div class="tooltip" tabindex="0" aria-expa ...
When using NavLink for Routing and showing the active item of selected items, I am facing an issue where the home item is always shown as active even when switching to other items. This problem does not occur with items other than home. Can someone help m ...
Is there a way to change the fill color of the SVG when a user focuses on the input field? I have included the HTML and SCSS for reference, but I'm not sure how to write the CSS code to achieve this effect. <div class="search"> <svg widt ...
I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...