I have a rectangular bar that goes over the screen horizontally.
#rcorners1 {
border-radius: 25px;
background: #00CCFF;
padding: 20px;
width: 1210px;
height: 10px;
line-height: 10px;
vertical-align: middle;
}
<h2 id="rcorners1"><font color = "#000066"> Applications:</font></h2>
I want to add a hover effect such that whenever someone hovers over it, an triangle arrow pointing down comes.
Can anyone help me how to do it?
Here's a simple trick:
Place the triangle arrow on the page and hide it
On hover (via css), show the element
Sample HTML:
<h2 id="rcorners1">
Applications
<span class="hidden pull-right">▼</span> <!-- your down triangle -->
</h2>
Sample CSS
/* Magic sauce */
#rcorners1:hover .hidden {
display: inline-block;
}
/* Utilities */
.hidden { display: none; }
Demo: JSFiddle
Note: Instead of display, you can also use visibility to manipulate the triangle's rendering on hover.
Related
I would like to add a round-light glowing effect on a wide rectangular button, containing a certain text, on mouse over. I am trying to figure out how to use the box-shadow for this, but I think I should be able to achieve what I want by adding a "ghost" div inside the button, above the text (here it comes the overlay?) and I would then apply the box-shadow to this ghost div and not to the button itself (because I don't want the whole button borders getting shadowed, only a tiny dot in the middle of it). Applying a border-radius: 100% to the ghost div, will then provide a perfect rounded shadow. How can I manage these two elements (the text area and the ghost div) in overlay, inside my button? Thanks a lot!!
Here is my starting code:
HTML:
<button type="button" mat-flat-button>
<div class="glow-fx"></div> <!-- The "ghost" div, responsible of the round glowing effect-->
{{button.label}} <!-- The button text -->
</button>
CSS:
button {
display:flex;
justify-content: center;
align-content: center;
align-items: center;
width: 162px;
height: 26px;
color: black;
background-color: #aa8b0f;
border-radius: 20px;
}
button:hover {
transition: 0.5s;
background-color: #edc00a;
}
.glow-fx {
width: 20px;
height: 20px;
border-radius: 100%;
}
using text-shadow on your button css file. choose the size and color what ever you want.
button:hover {
transition: 0.5s;
background-color: #edc00a;
text-shadow: 1px 1px #0000ff;
}
How can I make such an effect / animation with CSS? Could be with JavaScript/jQuery as well, if pure CSS is not possible.
None of my searches so far gave me any reasonable hints (perhaps I just do not know what the right terms to use here).
It does not have to be exactly the same: even a partial similar effect would do.
The animation required:
Normal state: a button with red background & border; white text. Only "Add to Cart" text, centered.
On hover/focused state: button's background becomes white; text color becomes red (so they invert places), the small > appears and moves to the right; the button text moves to the left.
The same in a text form:
[ ADD TO CART ] -- normal state
[ ADD TO CART > ] -- hovered state
Using Bootstrap 5.1 as a base style in my attempts (do not think that it matters here though).
HTML code:
<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">></span></button>
Base CSS:
/* === THEMED BUTTONS === */
.btn-themed {
border: 2px solid #ff1a0a;
background-color: #ff1a0a;
color: #fff;
border-radius: 5px;
transition: .5s;
}
.btn-themed:hover,
.btn-themed:focus {
border: 2px solid #ff1a0a;
background-color: #fff;
color: #ff1a0a;
}
/* === EFFECT ON BUTTON === */
.btn-effect span.extra {
display: none;
}
.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
display: inline;
}
Here I'm hiding the bit with the > and showing it only on hover. This is to have the main button text to be fully centered (when a button in the "normal" state). On hover that bit shows up but:
It is jumpy (see the next image)
and most importantly: I have no idea how to position elements and what to apply to have them move as required.
I would really appreciate any hints / a working example on some existing website or even link to some JS library that can be used here etc.
Dont do animations on display property.
Just add margin-right on text on hover. Thats all
.button:hover .text {
margin-right: 50px;
}
https://codepen.io/VeterJS/pen/wvdRoKp
Is that what you are looking for?
/* === THEMED BUTTONS === */
.btn-themed {
border: 2px solid #ff1a0a;
background-color: #ff1a0a;
color: #fff;
border-radius: 5px;
transition: .5s;
width: 150px;
height: 50px;
transition: 1s;
}
.btn-themed:hover,
.btn-themed:focus {
border: 2px solid #ff1a0a;
background-color: #fff;
color: #ff1a0a;
}
/* === EFFECT ON BUTTON === */
.btn-themed span.extra {
visibility: hidden;
transition: 1s ;
}
.btn-effect:hover span.extra,
.btn-effect:focus span.extra {
visibility: visible;
margin-left: 40px;
}
<button class="btn btn-themed btn-effect text-uppercase"><span class="title">Add to Cart</span> <span class="extra">></span></button>
The main issue is caused by a button being circular. But I really want a circular button, which is leading to hovering problems!
All I want is to have a circular <a> button that when hovered-over will reveal another element below it, like a div or another a tag. These two elements are separated by a gap.
Then I should be able to move my mouse down and hover over the revealed element and click on it or whatever. But of course if you unhover the original <a> then the other element will disappear, especially since there is a gap between the two elements. What is the best way to make it so that I can move my mouse from element 1 to element 2 without element 2 vanishing during mouse travel?
Ideally this shouldn't require JS.
I've created a basic setup for this so far to get started:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
Here's an explanation of an old solution attempt of mine:
My first solution to stop element 2 from vanishing upon downward movement of the mouse was to put an invisible hoverable element between elem 1 and 2 which would keep elem 2 active while the mouse moves down to it. And this would work great, IF all elements were rectangular. But my elem 1 is circular!
This means that there is literally one single pixel of contact between the middle hover buffer element and elem 1 because there are those circular "corner" gaps between elem 1 and the invisible middle element. So whenever you move your mouse down, you are still going to miss that middle hover element 99% of the time.
And you can't put it behind elem 1 either to fill in those circular "corners" because the circular element has a bounding box that you can only see in inspect element and this bbox prevents you from filling up those "corners" with an area that actually interacts with the mouse, therefore making this solution useless. It's quite confusing in my explanation but try it out if you manage to implement this "solution".
The first solution to come to mind is wrapping the circular button into a parent div, which will be the div that will activate the hover effect. This way, you can add padding-bottom to imitate the gap look while still making the "gap area" trigger the hover effect. In the snippet below, I made the wrapper div have a red background so you can see how it works. If you remove the red background, it should function as intended.
https://codepen.io/xenvi/pen/yLONOEa
body {
padding: 30px;
height: 100vh;
}
.buttonWrapper {
display: inline-block;
margin-bottom: 40px;
background: red;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
background-color: green;
width: 100px;
height: 50px;
}
.buttonWrapper:hover+#hoverInfo,
#hoverInfo:hover {
display: block;
}
.buttonWrapper:hover {
margin: 0;
padding-bottom: 40px;
}
<div class="buttonWrapper">
<a id="myBtn" href="/">
button
</a>
</div>
<a id="hoverInfo" href="/">hover info</a>
You can solve this easily using a pseudo element that will make the hoverable area bigger and that you activate only on hover:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
position:relative;
}
#myBtn:before {
content:"";
display:none;
position:absolute;
top:90%;
left:0;
right:0;
height:28px;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover::before {
display:block;
background:rgba(0,0,255,0.2); /* to illustrate */
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
I want to hide circle button in paper-radio and replace that with a custom div which displays circle with number.
I tried below code,but it hides all contents
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
paper-radio-button{
visibility: hidden; /* hides circle button but also hides content inside radio button tag**/
}
<paper-radio-button checked>
<div class="numberCircle">2</div>
</paper-radio-button>
I tried these codes
Plunker:https://plnkr.co/edit/kzCDugV8O2H5Z0eKMLZS?p=preview
I've been trying the same for a time. However, did not find any way to do it. You could work around with the exposed mixins (--paper-radio-button-unchecked-color and --paper-radio-button-checked-color) by setting the colour the same as the background, but it would not work if the selected style would be a different colour.
So here is the head container I'm using right now.
<header>
<div class ="headcontainer">
<nav class ="links">
Home
Page1
page2
</nav>
<nav class ="login">
Login
page4
</nav>
</div>
</header>
this is the CSS part:
.headcontainer {
width: 960px;
margin: auto;
header {
width: 100%;
height: 35px;
z-index: 10;
position: fixed;
top: 0;
left: 0;
background: #A7A7A7;
}
.links {
float: left;
text-align: left;
}
.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;
}
Basically I have different words I can click on at the top of the website, basically acting as a navigation header. So basically I have a stripe of line with color grey as background with white color on the text. like this:
What I want to do is that when I hover over one of these words it will turn the background white and make the text grey instead for just that word in a square. Like this:
I tried a lot of ways, but I couldn't get it to work. Would appreciate any help I can get! Thanks.
Add this to your css:
.links a:hover {
background: white;
color: gray;
}
You can use CSS :hover selector on the element(s) and then change the color and background to whatever you want Look here
Or you can use jQuery's .hover() function. Look here
You can accomplish this using jQuery.
Your container for the links will require an id.
When you hover over a chosen link an onhover action needs to be applied, this will trigger a jQuery action to amend the CSS.
A good place to start would be div background color, to change onhover accompanied with a short jQuery function to change the link colors.