I need to know how can I create a button, that has red color in starting but when get the mouse to it, it changes to orange.
I need to create button like this for my website.
You should look into CSS pseudo-class, and transitions.
:hover
The :hover CSS pseudo-class matches when the user interacts
with an element with a pointing device, but does not necessarily
activate it. It is generally triggered when the user hovers over an
element with the cursor (mouse pointer).
transition
The transition CSS property is a shorthand property for
transition-property, transition-duration, transition-timing-function,
and transition-delay.
button {
background: red;
transition: background 300ms ease-in-out;
}
button:hover {
background: orange;
}
<button>Simple</button>
button {
background-color: red;
}
button:hover {
background-color: orange;
}
button#b:hover {
transition: 1s;
}
Immediate change
<button>Hello World</button>
<br><br>
Change with transition
<button id="b">Hello World</button>
I have copied the heart icon from https://remixicon.com/
.heart-btn{
display: flex;
align-items: center;
color: red;
cursor: pointer;
border-radius: 50px;
padding: 0 10px;
}
.heart-btn:hover{
color: orange;
}
.label{
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button color</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="display: none;">
<symbol id="my-icon" viewBox="0 0 24 24">
<path fill="none" d="M0 0H24V24H0z"/>
<path fill="currentColor" d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z"/>
</symbol>
</svg>
<button class="heart-btn">
<svg width="24px" height="24px">
<use xlink:href="#my-icon"></use>
</svg>
<div class="label">Love it</div>
</button>
</body>
</html>
In the first example, my code generates the text as much larger and the circle as slightly smaller than they are without the viewbox attribute. They are also centered in the middle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%
}
svg {
position: absolute;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<svg id="test" width="100%" height="auto" viewBox="0 0 100 100">
<text id="thisthing" x="10%" y="10%" class="small">this is test</text>/>
<circle id="circe" cx="5%" cy="6%" r="5%" stroke="green" stroke-width="1%" fill="yellow" />
</svg>
</body>
</html>
In the second example, the circle is slightly larger and the text is much smaller. They are
in the left hand corner as intended.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%
}
svg {
position: absolute;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<svg id="test" width="100%" height="auto" >
<text id="thisthing" x="10%" y="10%" class="small">this is test</text>/>
<circle id="circe" cx="5%" cy="6%" r="5%" stroke="green" stroke-width="1%" fill="yellow" />
</svg>
</body>
</html>
I am wondering what the purpose of the viewbox is and why it is creating this difference. My
understanding is that the viewbox is supposed to help with svg percentage scaling, but it is operating differently than intended. The big issue is my svg objects are shifting to the middle and not in the intended position in the top left corner.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
The viewBox attribute defines the position and dimension, in user
space, of an SVG viewport.
The value of the viewBox attribute is a list of four numbers: min-x,
min-y, width and height. The numbers, which are separated by
whitespace and/or a comma, specify a rectangle in user space which is
mapped to the bounds of the viewport established for the associated
SVG element (not the browser viewport).
<style>
svg{ width:30%; background:pink}
</style>
<svg>
<text x="10%" y="10%">this is test</text>/>
<circle cx="5%" cy="6%" r="5%" stroke="red"/>
</svg>
<svg viewBox="0 0 100 100">
<text x="10%" y="10%">this is test</text>/>
<circle cx="5%" cy="6%" r="5%" stroke="red"/>
</svg>
<svg viewBox="0 0 100 30">
<text x="20" y="20">this is test</text>/>
<circle cx="10" cy="15" r="5" stroke="red"/>
</svg>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
I've made an SVG with a transparent background and I added it to the orange box in my HTML, and now I'm trying to add another element in my box (like this blue box here) with my SVG displaying onto the blue box; but no matter how big the z-index I give to my SVG and a position: relative, it wouldn't be displayed over my blue box, which is what I'm struggling to approach,
Any possible solutions would be welcome!
body {
background-color: olive;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
.box:hover svg {
position: relative;
z-index: 10000;
display: block;
}
.box .cover {
width: 60px;
height: 60px;
background-color: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="cover"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M30,54C16.77,54,6,43.23,6,30h1c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7
C19.25,7,9.79,14.61,7.52,25.11c-0.06,0.27-0.32,0.44-0.59,0.38c-0.27-0.06-0.44-0.32-0.38-0.59C8.92,13.95,18.78,6,30,6
c13.23,0,24,10.77,24,24S43.23,54,30,54z"/>
</g>
<g>
<path class="st0" d="M30,49c-11.03,0-20-8.76-20-19.52c0-0.26,0.22-0.48,0.49-0.48c0.27,0,0.49,0.21,0.49,0.48
c0,10.24,8.53,18.57,19.02,18.57c10.49,0,19.02-8.33,19.02-18.57c0-0.26,0.22-0.48,0.49-0.48S50,29.21,50,29.48
C50,40.24,41.03,49,30,49z"/>
</g>
<g>
<g>
<path class="st0" d="M22.5,32.5c-1.93,0-3.5-2.02-3.5-4.5v-9c0-2.48,1.57-4.5,3.5-4.5S26,16.52,26,19v9
C26,30.48,24.43,32.5,22.5,32.5z M22.5,15.5c-1.35,0-2.5,1.6-2.5,3.5v9c0,1.9,1.15,3.5,2.5,3.5S25,29.9,25,28v-9
C25,17.1,23.85,15.5,22.5,15.5z"/>
</g>
</g>
<g>
<path class="st1" d="M41,28c0,2.2-1.35,4-3,4s-3-1.8-3-4v-9c0-2.2,1.35-4,3-4s3,1.8,3,4V28z"/>
</g>
<path class="st2" d="M27,1"/>
</svg>
</div>
</body>
</html>
This happens because your SVG has a "static" position by default.
Z-index only affects elements that have a position value other than static.
In your case assigning position: relative to your SVG will help.
Add the following to your css and it will work as expected (z-index will change on hover, since you applied it to :hover)
.box svg {
position:relative;
}
Try putting this in your svg:
position:relative;
z-index:99;
please share/help if you can.
I want to make a SVG animation with CSS. I have one SVG that includes a "outer" square and a small circle inside of that square. Think of a dice with one dot.
Now I would like to move only the circle inside the box/square. I dont know and cant find how to do that. I can move the whole SVG but not the "inner" SVG.
Here my Code (the outer ID tag works, but I want the inner ID tag to work // I did include the outer tag only for demo purpose // delete it):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-circle {
width: 300px;
height: 300px;
background-color: transparent;
position: relative;
animation-name: LtopRbottom;
animation-duration: 2s;
}
#keyframes LtopRbottom {
0% { left:0px; top:0px;}
100% { left:150px; top:150px;}
}
</style>
</head>
<body>
<svg width="300" height="300" style="border:1px solid black" xmlns="http://www.w3.org/2000/svg" id="my-circle">
<svg >
<rect x="10" y="10" width="280" height="280" ry="20" fill="#fff" stroke="#000" stroke-width="10"/>
</svg>
<svg id="my-circle">
<circle cx="150"cy="150" r="25" stroke="#0ff" fill="#f0f"/>
</svg>
</svg>
</body>
</html>
You don't need to nest every SVG element inside a separate SVG element. As Robert mentions, you have duplicate ID's and if you want to animate the circle's position, then animate its positioning attributes (cx and cy). SVG subelements don't have left or top properties.
#my-circle {
width: 300px;
height: 300px;
background-color: transparent;
position: relative;
animation-name: LtopRbottom;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes LtopRbottom {
0% { cx:0px; cy:0px;}
100% { cx:150px; cy:150px;}
}
<svg width="300" height="300" style="border:1px solid black" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="280" height="280" ry="20" fill="#fff" stroke="#000" stroke-width="10"/>
<circle id="my-circle" cx="150"cy="150" r="25" stroke="#0ff" fill="#f0f"/>
</svg>
I'm trying to run this small gif inside an SVG animation on my localhost, I've compiled the scss into css, but still, nothing is visible.
Here's the code:
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet/css" type="text/css" href="style.css">
</head>
<body>
<!-- Define our SVG clip path -->
<svg width='0' height='0'>
<defs>
<clipPath id="cp" clipPathUnits="objectBoundingBox">
<path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
</clipPath>
</defs>
</svg>
<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div>
</body>
</html>
css:
html {
min-height: 100%;
background: #B8BEB4;
background: radial-gradient(#B8BEB4, #71685F);
background-size: cover; }
.triangle {
clip-path: url(#cp);
width: 50vw;
height: 50vw;
max-height: 75vh;
max-width: 75vh;
background-size: cover;
background-blend-mode: screen;
position: absolute;
top: 50%;
left: 50%; }
.first {
background-color: #C5075C;
background-image: url("https://media.giphy.com/media/pE6GG0V2JCKUo/giphy.gif");
transform: translateX(-65%) translateY(-50%); }
.second {
background-color: #03B897;
background-image: url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
transform: translateX(-35%) translateY(-50%);
opacity: 0.8; }
See the Pen Reverse clip path with blend modes by Zach Saucier (#Zeaklous) on CodePen.
As the comments suggest, this works fine if the CSS is placed directly inside the HTML.
Turns out this is a simple typo. Please change:
<link rel="stylesheet/css" type="text/css" href="style.css">
To:
<link rel="stylesheet" type="text/css" href="style.css">