Leon.
Reputation: 1
The button is not displayed as I would like it to be
I want my buttons like this: https://codepen.io/jouanmarcel/pen/LYYEmmO but when I put that in my code, something like that comes out
<!DOCTYPE html>
<html>
<head>
<body>
<link rel="stylesheet" href="css/style.css">
<div class = box>
<button class="button">Fire</button>
<button class="button">Fire</button>
<button class="button">Ice</button>
<button class="button">Ice</button>
</body>
</head>
</html>
css
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer;
}
button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px;
}
button.fire {
border-color: rgba(255, 236, 168, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(255, 138, 48, 1), .4), transparentize(rgba(240, 96, 29, 1), .4));
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .4), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .4), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(255, 236, 168, 1),
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(255, 236, 168, 1);
}
button.ice {
border-color: rgba(168, 236, 255, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(48, 138, 255, 1), .5), transparentize(rrgba(29, 96, 240, 1), .5));
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .5), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .5), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(168, 236, 255, 1);
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(168, 236, 255, 1)
}
button:hover
button.fire {
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .2), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .2), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(255, 236, 168, 1)
}
button.ice {
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .2), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .2), inset 0 1px rgba(168, 236, 255, 1), inset 0 -1px rgba(168, 236, 255, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(168, 236, 255, 1)
}
button + button {
margin-top: 15px;
animation-delay: .3s;
}
@keyframes breath {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.95);
}
}
@keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1);
}
100% {
transform: skewX(-10deg) scaleX(0.95);
}
}
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none;
font-size: 12px;
}
idk how to fix it want it like so: https://codepen.io/jouanmarcel/pen/LYYEmmO
sorry for my english
Upvotes: 0
Views: 58
Answers (1)
Beowolve
Reputation: 558
Your conversion of sass to css is wrong on many places. transparentize is not a css function, and you need to change the rgba values accordingly. The original example is designed for DIV elements, the styling might not work for the button tag as expected. If you want to use plane css, its best to convert sass to css using a tool, not by hand. You could just use the sass command line tool or even easier use a online converter like the one from https://codebeautify.org/.
This will create the following code, that should work as expected:
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer; }
.button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px; }
.button.fire {
border-color: #ffeca8;
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8; }
.button.fire:before {
box-shadow: inset 0 0 30px 0 #ffeca8; }
.button.ice {
border-color: #a8ecff;
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.5), rgba(29, 96, 240, 0.5));
box-shadow: 0 0 70px rgba(48, 138, 255, 0.5), 0 5px 20px rgba(48, 138, 255, 0.5), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #a8ecff; }
.button.ice:before {
box-shadow: inset 0 0 30px 0 #a8ecff; }
.button:hover.fire {
box-shadow: 0 0 70px rgba(255, 138, 48, 0.8), 0 5px 20px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; }
.button:hover.fire:before {
box-shadow: inset 0 0 50px 0 #ffeca8; }
.button:hover.ice {
box-shadow: 0 0 70px rgba(48, 138, 255, 0.8), 0 5px 20px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff; }
.button:hover.ice:before {
box-shadow: inset 0 0 50px 0 #a8ecff; }
.button + .button {
margin-top: 15px;
animation-delay: .3s; }
@keyframes breath {
0% {
transform: scaleX(1); }
100% {
transform: scaleX(0.95); } }
@keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1); }
100% {
transform: skewX(-10deg) scaleX(0.95); } }
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none; }
.ref::first-letter {
font-size: 12px; }
Upvotes: 2