I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}
Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}
You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,
Related
I'm designing the front end of an e-commerce website and while looking through some inspiration I found a really nice effect involving a button and a after on that button, that when hovering over it, the text of the button would go up and at the same time an icon would replace it. You can see what I mean here. I probably won't use this on the project but I got really confused trying to mimic this effect while using Dev Tools, and just ending up with a cart icon on the bottom of the page and would love to know how to create something similar to this.
This is the final result
I almost got to something but I can't seem to make the text and the icon move at the same time, sometimes the icon wouldn't move at all and just the whole button would do, and not the text.
Any ideas on how this could be achieved with CSS? I already went through CodePen to find something similar and I'm not really sure how this effect is called to google it
EDIT: Already tried this code on an with a button class.
.button {
background: none;
font-weight: 600;
line-height: inherit;
margin: 0;
padding: 0 15px;
margin-top: 0;
position: relative;
text-align: center;
vertical-align: top;
-webkit-transition: color 0.15s linear 0s,-webkit-transform 0.3s linear 0s;
text-transform: uppercase;
transition: color 0.15s linear 0s,transform 0.3s linear 0s;
}
.button:hover {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.button:after {
background-color: inherit;
border-color: inherit;
border-style: inherit;
border-width: inherit;
font-size: 18px;
font-weight: 400;
height: auto;
margin: 0;
position: absolute;
left: 0;
top: 100%;
text-align: center;
width: 100%;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: none;
animation: none;
}
.button:hover:after {
top: 150%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
Here is a simple example using a psuedo element and font-awesome icon
.btn {
background-color: turquoise;
border-radius: 10px;
color: white;
padding: 5px 10px;
position: relative;
overflow: hidden;
height: 20px;
display: inline-block;
transition: all .3s;
}
.btn span {
position: relative;
top: 0;
transition: all .3s;
}
.btn::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f217";
position: absolute;
left: 50%;
transform: translatex(-50%);
top: 40px;
transition: all .3s;
font-size: 20px;
}
.btn:hover {
background-color: blue;
}
.btn:hover span {
top: -30px;
}
.btn:hover::after {
top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<a href="#" class="btn">
<span>Add to cart</span>
</a>
Here is a slightly simpler example using two different p tags instead of text/svg. It shouldn't be too much trouble to convert:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
width: 100px;
height: 40px;
overflow: hidden;
border: unset;
border-radius: 10px;
background-color: turquoise;
transition: all 200ms;
}
button:hover {
background-color: blue;
}
div {
height: 80px;
transform: translateY(0%);
transition: inherit;
}
div:hover {
transform: translateY(-50%)
}
p {
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 50%;
font-size: 18px;
font-weight: 600;
}
<button>
<div>
<p class="one">text one</p>
<p class="two">text two</p>
</div>
</button>
This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle
add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>
When I hover on the image, div(2) appears.
But I want div(2) to remain about x seconds even on mouse out.
I only want to use PURE CSS.
How can I do it?
jsFiddle
#basarilar {
float: right;
margin: 7px 357px;
width: 140px;
height: 24px;
position: relative;
z-index: 9999;
}
.yildiz {
height: 24px;
width: 24px;
background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz.png") 0 0 no-repeat;
margin-left: 10px;
float: right;
transition: .50s all;
transition-delay: 5s;
}
.yildiz:hover {
background: url("http://www.kelimelerbenim.com/wp-content/themes/kelimelerbenim/images/yildiz-2.png") 0 0 no-repeat;
}
.aciklama {
display: none;
position: absolute;
width: 200px;
height: 70px;
z-index: 9999;
top: 48px;
right: 0px;
padding: 15px 15px;
font-weight: bold;
text-align: center;
}
#bumerang1 {
color: #ffffff;
background: #76ab01;
}
#bumerang:hover + #bumerang1 {
display: block;
}
#bumerang1:hover {
display: block;
}
<div id="basarilar">
<div id="bumerang" class="yildiz"></div>
<div id="bumerang1" class="aciklama">This is my DIV</div>
</div>
Christopher Pearson was right about using transition-delays, but you'll need to change a couple of other things as well.
#basarilar {
float:right;
margin:7px 357px;
width: 140px;
height: 24px;
position: relative;
z-index: 9999;
}
.yildiz {
height:64px;
width:64px;
background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") no-repeat;
margin-left:10px;
float:right;
transition: .50s all;
transition-delay: 5s;
}
.yildiz:hover {
background:url("http://i.stack.imgur.com/vNQ2g.png?s=64&g=1") 0 0 no-repeat;
}
.aciklama {
visibility: hidden; /* use visibility rather than display */
position:absolute;
width: 200px;
height: 70px;
z-index: 9999;
top:48px;
right:0px;
padding: 15px 15px;
font-weight: bold;
text-align: center;
transition-delay: 3s; /* Set transition-delay to 3s, so the mouse out is delayed */
}
#bumerang1 {
color:#ffffff;
background: #76ab01;
}
#bumerang:hover + #bumerang1 {
visibility: visible; /* use visibility rather than display */
transition-delay: 0s; /* Set transition-delay to 0s, so the mouse over is still immediate */
}
#bumerang1:hover {
display:block;
}
<div id="basarilar">
<div id="bumerang" class="yildiz"></div>
<div id="bumerang1" class="aciklama">This is my DIV</div>
</div>
You will have to use transitions with the .transition-duration. See this thread for a similar application. You can also see the W3 schools transitions pages here.
I want to create a translucent background and display some text when user hover on the image like this http://demo.rocknrolladesigns.com/html/jarvis/#team . Is there anyway to make it without jquery?If yes,can anyone please teach me?
.container {
display: inline-block;
overflow: visible;
font-family: sans-serif;
font-size: 1em;
}
.theimg {
display: block;
width: 314px;
height: 223px;
border: solid 1px lightgray;
border-bottom: none;
transition: all .5s ease;
}
.container:hover .theimg {
opacity: 0.3;
}
.thename {
border: solid 1px lightgray;
text-align: center;
padding: 6px 0 6px 0;
transition: all .5s ease;
}
.container:hover .thename {
color: white;
background-color: #ffd600;
}
.thecover {
position: relative;
text-align: center;
top: -200px;
padding: 6px 0 6px 0;
opacity: 0;
transition: all .5s ease;
}
.container:hover .thecover {
top: -170px;
opacity: 1;
}
.thetitle {
font-size: 1.4em;
color: #515a7c;
font-weight: bold;
display: inline;
opacity: 1;
}
Yes, you can make it with CSS only:
<div class=container>
<img class=theimg src='http://demo.rocknrolladesigns.com/html/jarvis/images/team/team1.png' />
<div class=thename>MIKE ROSS</div>
<div class=thecover>
<div class=thetitle>FOUNDER</div>
</div>
</div>
See this and this for more info. jsfiddle
#wrapper span {
visibility:hidden;
position:absolute;
left: 50px;
top: 70px;
}
#wrapper:hover span {
visibility:visible;
}
#wrapper:hover img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div id="wrapper">
<img src="http://jonamdall.files.wordpress.com/2011/06/small-nyan-cat11.gif" />
<span>This is cat!</span>
</div>
I have create a pop up using only CSS and HTML it works fine as i need and here is code
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaaaaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
<div class="wrap">
pop up!
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
×
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
Nice!
</div>
</div>
</div>
Jsfiddle
My problem is when i click pop up entire page scroll down to bottom and pop up appears
since i have lot of content in my page
i need to open pop up on same place i don't want the page to scroll down can some one help whats wrong
NOTE when you try with the above code you can only find scroll little bit
but in my page it scroll to bottom of page
I don't know if I understand it correctly but try to add sth like that:
body.unscrollable {
overflow:hidden;
}
and add class .unscrollable when modal is open.
It will disable scrolling on website body.