I want to make a fancy button (The button Example image is attached below), I actually Saw this button on a website
I am a beginner to CSS, I have very less idea about it but still I want to know how we can make buttons like this, along with it's hover effect, Please help me out...
The image of the button :-
enter image description here
You can check the button snippet below created using pseudo class.
I used position: absolute to arrange the border. You can align it anywhere using the top and left properties.
button {
border: 0;
outline: none;
padding: 10px 20px;
background-color: #335dff;
color: #fff;
cursor: pointer;
position: relative;
}
button::after {
content: '';
display: inline-block;
width: 100%;
border: 1px solid #335dff;
position: absolute;
height: 35px;
left: -5px;
top: 5px;
border-radius: 2px;
}
section {
background-color: #000;
height: 300px;
padding: 30px;
}
<section>
<button>Click</button>
</section>
Looking at the code they use as #MMD suggests you can see that there are two main things in use.
Each link has a before pseudo element with a left and bottom border positioned absolutely relative to the a element and the border color is picked up from a CSS variable --bg.
To get the hover effect note that on hover the button tranlates down and left while the amount the pseudo element is offset from the button reduces to zero.
<style>
body {
background: black;
width: 100vw;
height: 100vh;
}
.link {
width: 20vmin;
height: 10vmin;
padding: 2vmin;
background-color: var(--bg);
position: relative;
display: inline-block;
margin: 2vmin;
transform: translate(0, 0);
transition: transform 0.3s linear;
}
.link::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 1vmin;
left: -1vmin;
border: solid var(--bg) 1px;
display: inline-block;
}
.link:hover {
transform: translate(-1vmin, 1vmin);
}
.link:hover::before {
top: 0;
left: 0;
}
.link1 {
--bg: white;
}
.link2 {
--bg: cyan;
}
</style>
<body>
<a class="link link1">Link1</a>
<a class="link link2">Link2</a>
</body>
Related
I have a div called time-box. Sometimes I will also include an additional class called countdown. If countdown is added then I would like to use a CSS transition effect so the background changes to be red over the course of 60 seconds. In other words, each second that passes the red background gets a little wider until eventually all of the green background has gone.
I have found similar posts here but they all seem to relate to hover
Here is a fiddle
https://jsfiddle.net/e2vbheew/
I don't know a "simple" way to get what you want going from left to right, but there's a way you can create it using before and after pseudoelements. The key here is I'm going to create a :before pseudoelement that has the new background that transitions across, and an :after pseudoelement that replicates the content and puts it on top of the before, so it's still visible. This required putting the content in an attribute on the div so I could reference it in the 'content' of the pseudoelement. If you had more complex content inside, you could probably do away with the :after and simply give the internal content position and z-index to make sure it's visible. Here's the resulting CSS
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.time-box:before {
background-color: red;
position: absolute;
left:0;
top: 0;
height: 100%;
width: 0;
content: " ";
transition: width 60s ease;
}
.countdown:after {
content: attr(data-content);
width: 100%;
text-align: center;
height: 100%;
position: absolute;
left: 0;
top: center;
z-index: 1;
}
.countdown:before {
width:100%;
}
And updated fiddle: https://jsfiddle.net/tunzwqd7/2/
Using CSS animation property...
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size: 2rem;
padding: 0px;
font-size: 1.2rem;
text-transform: uppercase;
padding: 3px 5px 3px 5px;
font-weight: 600;
height: auto;
position: relative;
z-index: 1;
}
.time-box.countdown:before {
content: '';
width: 0;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: red;
animation: countdown 60s forwards;
z-index: -1;
}
#keyframes countdown {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="time-box">
12:00
</div>
<div class="time-box countdown">
<span>12:00</span>
</div>
You would need to add a maximum and a little more math to make the 100% divisible by 60, but this should get you on the right track. Currently this code updates every second and adds 1% to the progress bar width with each iteration.
var time = 0;
var bar = document.querySelector('.countdown .progress-bar');
window.setInterval(function(){
time++;
bar.style.width = time+"%";
}, 1000);
.time-box {
height: 27px;
text-align: center;
background-color: #25E57B;
font-size:2rem;
padding:0px;
font-size:1.2rem;
text-transform:uppercase;
padding:3px 5px 3px 5px;;
font-weight:600;
height:auto;
position: relative;
}
.progress-bar {
display: none;
}
.countdown .progress-bar {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: red;
width: 0%;
z-index: 1;
transition: all 0.3s ease-out;
}
.countdown p {
z-index: 2;
position: relative;
}
<div class="time-box">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
<div class="time-box countdown">
<p>12:00</p>
<div class="progress-bar"></div>
</div>
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I'm trying to make a link image.
everything works with link but when I add a 2nd image to show when hover - then a strange border shows around it. Any ideas how to avoid the border?
I cant add a pics here so look here:
http://postimg.org/image/7q0jkc99t/
in html:
<div id="Oobj14">
<a href="formularz.html"><img id="Ggeo9" class="przed" onmouseover="this.className='po'"
onmouseout="this.className='przed'" alt=""></div>
in css:
.przed{
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
.po{
background: url('image/dolacz2.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
and for the image:
#Oobj14 {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
}
img#Ggeo9 {
width: 100%;
height: 100%;
opacity:1.0;
Why use javascript at all? I'd throw away the images and simply use backgrounds. Use CSS :hover to switch to another background
HTML:
<div id="Oobj14">
Descriptive text
</div>
CSS:
#Oobj14 a {
position: absolute;
font-size: 10px;
z-index: 13;
left: 43.20em;
top: 40.70em;
width: 143px;
height: 56px;
border-style: none;
overflow:hidden;
text-indent:-2000px;
}
#Oobj14 a {
background: url('image/dolacz.png') no-repeat;
width: 249px;
height: 70px;
border-style: none;
}
#Oobj14 a:hover {
background: url('image/dolacz2.png') no-repeat;
}
I'm stuck with CSS pseudo-elements :before and :after when I was trying to stylize button's background. The problem is this: when I'm using only positive z-indices to place span itself and its pseudo-elements in right order, :before and :after are always overlapping the element. When I'm using negative z-indices, it's all right, but I don't want to change other underlying elements' z-indices just to make the button working.
So that's the problem and that's the goal to be achieved except the negative z-indices.
Problem code:
.button {
display: inline-block;
z-index:3;
position: relative;
left: 25px;
top: 25px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
background: rgba(85,85,90, .7);
padding: 10px;
left: -10px;
top: -10px;
}
.button:after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
background: rgba(85,85,90, .4);
padding: 20px;
left: -20px;
top: -20px;
}
go for borders ! :)
http://jsfiddle.net/RwGV9/1/
basically
border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;
and same thing for the other one with the right left, top and padding !
if you don't mind putting attributes in your html, you could do like that :
http://jsfiddle.net/RwGV9/
in the HTML :
<span data-text='button !' class="button">button</span>
and in the CSS :
.button:before {
content: attr(data-text);
Basically put the text in the highest layer using button using content: attr(); and make you text disappear in the deepest one (bg color = type color is not very elegant but it keeps the text of the button selectable for the user !)
http://jsfiddle.net/D8gDK/
.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}
I got rid of the second pseudo element and put the before behind the button.
Might need some work with the colors...
Works only if you know the width of the button, though
Here's my fiddle.
Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?
.box {
float: left;
width: 200px;
height: 200px;
color: #fff;
background-color: lightblue;
position: relative;
}
.big-box {
float: left;
position: relative;
}
.big-box:after {
content: "";
box-shadow: inset 0px 0px 10px 0px #000;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
width: 100%;
height: 100%;
}
.box:hover {
background-color: green;
}
.big-box:after{
pointer-events: none;
}
https://jsfiddle.net/tm9pzudy/1/