All right? I'm having problems with an effect on CSS. Everything works perfectly until I put the code inside another div, and has a background that is not transparent. Look at the example below:
body {
background: #2ecc71;
padding:0;
margin:0;
}
#bg{
background: #000;
}
.container-button {
padding: 10em;
margin: 0 auto;
width: 1170px;
text-align: center;
display: block;
overflow: hidden;
}
/* GENERAL BUTTON STYLING */
.btn-more-info{
display:block;
overflow: hidden;
text-align: center;
display: inline-block;
float: left;
}
.btn-more-info a,
.btn-more-info a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-more-info a {
background: none;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}
.btn-more-info a:hover {
color: #2ecc71;
}
/* BUTTON EFFECT */
.btn-effect {
overflow: hidden;
}
.btn-effect::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-effect:hover:after {
height: 100%;
width: 135%;
}
.btn-send{
overflow: hidden;
text-align: center;
clear: both;
}
.btn-send a,
.btn-send a::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
test-ident: -9999px;
text-decoration: none;
}
.btn-send a {
background: none;
border: 2px solid #353B4C;
border-radius: 5px;
color: #353B4C;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 20px 50px;
position: relative;
text-transform: uppercase;
}
.btn-send a::before,
.btn-send a::after {
background: #353B4C;
content: '';
position: absolute;
z-index: -1;
}
.btn-send a:hover {
color: #FFF;
}
<div id="bg">
<div class="container-button">
<div class="btn-more-info">
Continue lendo
</div>
<div class="btn-send">
Enviar mensagem
</div>
</div>
</div>
You see, if you remove the id="bg" effect functions normally.
Can anyone help me?
Thank U!
The problem is on the z-index of the :before and :after.
Try this:
.btn-more-info a::before,
.btn-more-info a::after {
background: #fff;
content: '';
position: absolute;
z-index: 0;
}
Also increase the z-index on the text inside the button.
Related
Im new to css and html and im trying to make a good looking website for my FiveM RP Server, and im having issues with the buttons
a:visited {
color: white;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:after {
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover {
color: green;
border-bottom: 3px solid #004F10;
transform: scaleX'(1);
}
a:active {
color: darkgreen;
}
<header>
<ul>
<h2>Home</h2>
<h2>Rules</h2>
<h2>Discord</h2>
</ul>
</header>
I have displayed the "a" tag as an inline-block so that it doesn't occupy the whole container width.
In your code, you forgot to add content property. And the hover is applied to the ::after selector of the "a" tag not the "a" tag itself. Here is the fix to your code.
a{
display: inline-block;
color: white;
text-decoration: none;
}
a::after {
display: block;
content: '';
border-bottom: solid 3px darkgreen;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
a:hover::after{
transform: scaleX(1);
}
a:active{
color: darkgreen;
}
a:visited{
color: white;
text-decoration: none;
}
Check this CodePen from Peter, he did exactly what you want.
Code:
<nav>
<div id="wrapper">
<ul>
<li>item1</li>
<li>item2</li>
<li class="different">item3</li>
<li class="different">item4</li>
</ul>
</div>
</nav>
CSS:
body, html{
width:100%;
height:100%;
background-color: #999999;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
font-family: Helvetica;
}
nav{
width: 100%;
height: 50px;
position: fixed;
top: 0;
left:0;
background-color: #333333;
}
#wrapper{
width: 100%;
height: 100%;
overflow: hidden;
display: block;
float: left;
}
#wrapper ul{
diplay: block;
width: 50%;
margin: 0 auto;
height: 100%;
text-align: center;
}
#wrapper li{
display: block;
float: left;
text-align: center;
width: 25%;
height: 100%;
transition: all ease-in-out .2s;
}
#wrapper a{
display: block;
float: left;
color: white;
width: 100%;
padding: 0 .5em;
line-height: 50px;
text-decoration: none;
font-weight: bold;
}
li.different{
border:none;
position: relative;
}
li.different:hover{
border: none;
}
li:hover {
border-bottom: 5px solid #FFFFFF;
}
.different::after{
content: '';
position: absolute;
width: 0px;
height: 5px;
left: 50%;
bottom:0;
background-color: white;
transition: all ease-in-out .2s;
}
.different:hover::after{
width: 100%;
left: 0;
}
CodePen
There are total 3 animation.
1st with default top-down animation.
2nd with fade animation
3rd with fade and scale animation.
.main-container{
display: flex;
}
/* First tag */
.testAni {
font-size: 50px;
display: inline-block;
position: relative;
color: darkgreen;
text-decoration: none;
margin-right: 20px;
}
.testAni:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
}
.testAni:hover:after {
top: 100%;
}
/* Second tag */
.testAni2:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
width: 100%;
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni2:hover:after {
top: 100%;
opacity: 1;
}
/* Third tag */
.testAni3:after {
content: '';
position: absolute;
border-bottom: 5px solid darkgreen;
transform: scale(0.1);
left: 0;
top: 30px;
transition: 0.5s all ease;
opacity: 0;
}
.testAni3:hover:after {
top: 100%;
transform: scale(1);
opacity: 1;
}
<div class="main-container">
<h2><a class="testAni" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2" href="index.html">Home</a></h2>
<h2><a class="testAni testAni2 testAni3" href="index.html">Home</a></h2>
</div>
I am trying to mimic the hover transitions for buttons as found on this page.
I have the following so far:
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
input[type="submit"]:hover {
text-decoration: none;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
border: 3px solid #000;
background-color: #000;
color: #fff336;
}
input[type="submit"]:hover:after {
height: 100%;
}
input[type="submit"]:after {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
The above button is the only button on my page and with the following above code, I'd expect it the black background to hover from bottom to top, but it's not - why?
Edit:
[Preview link to page][2]
You don't have to use pseudo-element with input tag (Can I use a :before or :after pseudo-element on an input field?). Consider adding pseudo element on a container. Also remove the background of your input. It need to be transparent so you can see the effect of pseudo-element behind.
Here is an example:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
padding:20px;
border:none;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
input not support ::before ::after you can use
<Button>
than add ::before ::after .
LIke https://jsfiddle.net/ufL55gfw/1/
Try below
.slider-button {
margin-top: 70px;
}
#media (max-width: 1220px) {
.slider-button {
margin-top: 30px;
}
}
.slider-button .button {
text-align: left;
}
#media (max-width: 1220px) {
.slider-button .button {
text-align: center;
}
}
.slider-button .button {
text-align: left;
}
.button {
text-align: center;
}
.button a{text-decoration:none;}
.button__item {
font-family: "Raleway", sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.313rem;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
padding: 32.5px 65px;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.button__item:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.button__item:hover:after {
height: 100%;
}
.button__item:after {
content: "";
background: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="slider-button"><div class="button">DOWNLOAD NOW</div></div>
Good Afternoon,
I realize this topic has been asked several times and has got several solutions to as I have seen from searching your forums.
But solutions such as,
<input type="button" value="Click Me" **style="float: right;"**>,
Even though do successfully align the button to the right, they overlap my footer as the button is supposed to be right above the footer. This is my code:
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<footer class="containers-fluid text-center">
</footer>
Just add style float:right to your button
add this between button and footer
<div class="clearfix"></div>
and css for clearfix
.clearfix{
clear: both;
}
Read more about clearfix
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
display: block;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
.clearfix{
clear: both;
}
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<div class="clearfix"></div>
<footer class="containers-fluid text-center">
</footer>
You can use float:right and set the position attribute to relative
Just wrap them both inside a container with display:flex;flex-direction:row; and then apply margin-right:0; to the button.
See the code below
.container{
display:flex;
flex-direction:column;
}
.button {
border-radius: 4px;
background-color: #0FA0FF;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px 0 5px auto;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.containers-fluid {
padding: 20px 50px;
background-color: #000000;
color: white;
}
<div class="container">
<button class="button"><span>Proceed to Next Lesson </span>
</button>
<footer class="containers-fluid text-center">
</footer>
</div>
I have a button that, when pressed, is supposed to expand the element behind it (.nav which contains .work and .contact) out in both directions. However, I can't seem to keep the button in the center.
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
Give the nav a style of position: relative. Then, toggle a class (or just add the styling, should work as well) to the button on click that does the following:
button.my-pressed-class {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This should keep it in the middle.
Edit: Keep in mind you already have a transform set on the button on hover. Just, add the translateX to hover when the button has the aforementioned class, to avoid it from moving around on hover.
add postion relative to .navigation and position absolute to .nav with left value
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.navigation {
position: relative;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
position: absolute;
left: 100px;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
I'm doing a search box slide. What I need is that when you click on the magnifying glass, move the slide the "Castilian", text and that it is not fixed text and sarch see box below. It's possible? this is the best I could do ...
My code
try this css. This worked.
#wrap {
margin: 39px 60px;
display: inline-block;
position: relative;
/*float: right;*/
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: relative;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus form {
width: 700px;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
/*float: right;*/
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}