I am new to web development and I have a bug that I cannot seem to fix. Basically, I have a button that highlights when its hovered and it works but there is a small outline of the original color when hovered. I'm pretty sure this is not because of an outline or a border. The bug is displayed in the picture provided. Here is the code:
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
}
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
EDIT: I'm using Google Chrome and Windows 11 (idk if OS is important)
The box shadow is slightly transparent around those corners, allowing you to see the beige background color underneath. Changing the background color of the button on hover to the same color as the box shadow fixes this. The effect is ever so slightly different, but I can't really tell just from looking at it.
Also, on chrome, this box shadow transition blinks. I messed around with it and changed the 4th number to 1px and it stopped blinking. I couldn't tell you why, but there you go.
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
body {
background-color: #2d2f31;
}
.start{
width: 200px;
height: 75px;
border: none;
color:black;
background-color: beige;
border-radius: 50px;
box-shadow: inset 0 0 0 0 rgb(36, 36, 37);
font-size: 15px;
outline: 0;
transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
overflow: hidden;
}
.start:hover{
background: rgb(36, 36, 37);
box-shadow: inset 200px 0 0 1px rgb(36, 36, 37);
color: white;
}
<div class=buttondiv>
<button onclick="coming('maintext', '#F0F');" class='start' >button</button>
</div>
I just got why it's like that. It's cause of your "beige" background. When I change it to "red" look how it is
red background button
Fix: Let's give background when :hover state is used
So your code will be like
.start:hover{
box-shadow: inset 200px 0 0 0 rgb(36, 36, 37);
color: white;
background: rgb(36,36,37);
}
Let me know how it is
Related
The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!
Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git
With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.
I'm new to developing! I started learning a few months ago :D
I'm trying to make it so when I hover around a div that contains a header and some text, then a border colored in a different way than the background will pop up around it, highlighting the area of that div.
I've been successful with that!
.item {
border: solid 0px;
border-spacing: 10px;
background: rgba(164, 165, 219, 0.45);
border-radius: 20px;
}
.item:hover {
background: rgba(72, 74, 196, 0.45);
}
However, I can't seem to be able to change the color of the text as well.
I can only change the color of the text when hovering directly above it.
.project-text {
color: rgb(43, 41, 41);
font-size: 50px;
}
.project-text:hover {
color: white;
}
I want to be able to change the color of the text already while hovering around the border of the div, is it possible to do so?
I'm assuming that .project-text is inside of .item. You can create a CSS selector to that styles the children based on hover state of the parent. See commented code below; I added a padding on .item to better show the result.
.item {
border: solid 0px;
border-spacing: 10px;
background: rgba(164, 165, 219, 0.45);
border-radius: 20px;
padding: 2rem /* two times the font size of the body */
}
.item:hover {
background: rgba(72, 74, 196, 0.45);
}
.project-text {
color: rgb(43, 41, 41);
font-size: 50px;
}
.item:hover .project-text { /* changed selector */
color: white;
}
<div class="item">
<p class="project-text">
Hello
</p>
</div>
Is this what you're asking?
I just added extra background-color for the hover feel free to remove that.
#mainDiv {
height: 30px;
width: 100px;
border:1px solid black;
font-size:bold;
text-align:center;
padding:4px;
color:red;
}
#mainDiv:hover {
color: yellow;
background-color: teal;
font-size: 15px;
}
<div id="mainDiv">
Hover here
</div>
I have two buttons on a page. I styled the second button with CSS to kind of shine in a light grey. Now I want to add some event (I guess with JS?) which only highlights the second button, after the first button has been clicked on.
<button class="tempo1" type="button" onclick="buttonShow()">Datenschutzerklärung</button>
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
TEXT
<p style="text-align: center; margin-top: 20px">
<button type="button" onclick="buttonHide()">Schließen</button>
</p>
</div>
<!-- Der JavaScript-Code -->
<style>
.tempo1 {
background-color: #A4A4A4;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
-webkit-animation: glowing 1500ms infinite;
-moz-animation: glowing 1500ms infinite;
-o-animation: glowing 1500ms infinite;
animation: glowing 1500ms infinite;
}
.tempo1:focus {outline:0;}
#-webkit-keyframes glowing {
0% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; -webkit-box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; -webkit-box-shadow: 0 0 3px #848484; }
}
#-moz-keyframes glowing {
0% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; -moz-box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; -moz-box-shadow: 0 0 3px #848484; }
}
#-o-keyframes glowing {
0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
#keyframes glowing {
0% { background-color: #848484; box-shadow: 0 0 3px #848484; }
50% { background-color: #A4A4A4; box-shadow: 0 0 40px #A4A4A4; }
100% { background-color: #848484; box-shadow: 0 0 3px #848484; }
}
}
</style>
Basically I want to put a condition on the button (class=temp1) in the top line. The CSS code below should just be activated if another button (I havent listed the code for this button here) is clicked. Also, I would appreciate any advice if there is a way to style a button in a similar way with less code.
If the idea behind it or my question are not clear enough, please ask :)
Thanks for your time and help!
you can achieve this in js by listening to click events on the first button, and adding the 'glow' class to the 2nd button, like so:
//select btn1, and listen to click events on it
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click", addGlow);
//the function addGlow, adds the glow class to btn2
function addGlow() {
var btn2 = document.getElementById("btn2");
btn2.classList.add("glow");
}
button{
width:100px;
height:50px;
background-color:grey;
border-radius:5px;
border:none;
}
.glow{
background-color: cyan;
}
<button id="btn1">button 1</button>
<button id="btn2">button 2</button>
note that this code only adds the css glow class, if you want the button to 'turn off' at some point, you'll need to remove the glow class, which can be done like so:
btn2.classList.remove("glow");
hope this helps :)
I've been stumped by this for a bit and would really appreciate some advice if possible. So here is the offending website in question: Imran Ahmed's Website
The issue that I'm having is with these buttons: In the example above, the 'Devpost' button shouldn't just appear by itself, it should also have another button 'Github' next to it (as shown in the image below).
Now, while the div for this is in the correct place, the button actually appears right at the top of the screen (as an artefact) here:
This is obviously not the correct functionality for the website. In terms of things I have tried, I have attempted to change the CSS of the corresponding div (link-effect) to use position: absolute instead of position: relative - while this fixed the artefact, it ruins the button animations (which isn't useful).
Now, one thing I've noticed is that this seems to appear on Chrome only after the slide in animation (part of the WOW package) has finished. If you scroll down to the My Projects section and refresh the page you'll notice the button only disappears when the animation completes (here's an example of the formatting working correctly during the middle of the animation):
This leads me to believe there is a change the animation complete function is making that is causing this bug - but unfortunately I can't pinpoint it down. I tried using the chrome animation tool to dive down on the changes but I'm a rookie with web development/debugging and I couldn't make much headway.
With this in mind, I would really appreciate any advice you may have on how to resolve these artefacts! In addition, it would be great if the error could be explained - because I'd like to know how to avoid it in the future! Thanks for everything!
I believe the relevant code in question is below but I'm not exactly sure if this is indeed where the problem lies!
.link-effect {
width: 100%;
height: 42px;
display: inline-block;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.link-effect a {
margin: 0 auto;
color: rgba(230, 126, 34, 1);
position: relative;
padding: 16px 7px;
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
.link-effect a::after,
.link-effect a::before {
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 0;
color: rgba(230, 126, 34, 0);
content: attr(data-text);
transition: max-height .3s, border-color 0s
}
.link-effect a:focus,
a:hover {
padding: 5px 7px;
border-color: rgba(230, 126, 34, 1);
outline: 0
}
.link-effect a::before {
top: 0;
border-left: 2px solid rgba(230, 126, 34, 0)
}
.link-effect a::after {
padding: 5px;
border-right: 2px solid rgba(230, 126, 34, 0)
}
Hope this helps :)
.link-effect {
width: 100%;
height: 42px; // remove this
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
display: flex; // add this
justify-content: center; // add this
}
.link-effect a {
margin: 0 5px; // change this
color: rgba(230, 126, 34, 1);
position: relative;
padding: 5px 7px; // change this
border-top: 2px solid rgba(230, 126, 34, 0);
border-bottom: 2px solid rgba(230, 126, 34, 0);
transition: padding .3s, border-color .3s;
font-size: 14px;
-webkit-transform: translate3d(0, 0, 0);
}
I have a problem. I am trying to program running away button, but it keeps leaving browser window. Is there any way how to set some limitations to random movement? I am trying to add this button to Adobe MUSE website... ANY IDEAS PLEASE? Thanks!
<input onclick="location.href='http://www.besyx.sk/PF2017/gratulujeme.html';"
value="CHCEM ZVÝŠIŤ ADRENALÍN"
style="transition: all 0.3s ease 0s;
background: rgb(48, 197, 255) none repeat scroll 0% 0%;
color: rgb(255, 255, 255);
height: 50px;
border: 1px solid rgb(0, 153, 179);
border-radius: 100px;
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;"
onmouseover="this.style.marginLeft=Math.random()*400+event.clientX/8+'px'; this.style.marginTop=Math.random()*400+event.clientY/8+'px';" type="button">