I am trying to create an expanding css button. I have made some progress but can't seem to get it to work unless I use absolute positioning. Is there a way to make this type of button without needing it to be absolute positioned on a page. Thanks for any help. Below is what I have so far.
I want it to work without needing to be absolutely positioned on the page.
.add-new-button {
right: 250px;
position: fixed;
width: 40px;
height: 40px;
background-color: #1BA1FC;
border-radius: 40px;
transition: width 0.3s;
overflow: hidden;
cursor: pointer;
}
.add-new-button-icon {
top: 0;
right: 0;
z-index: 4;
position: absolute;
color: #fff;
transition: transform 0.2s;
width: 40px;
height: 40px;
}
.add-new-button-icon i {
top: 12px;
height: 100%;
margin-left: 14px;
position: relative;
}
.add-new-button:hover {
width: 110px;
}
.add-new-button:hover .add-new-button-icon {
transform: rotate(90deg);
}
.add-new-button-label {
width: 80px;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
font-family: "Source Sans Pro", sans-serif !important;
font-weight: 700;
position: relative;
margin-top: 5px;
padding-left: 10px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
opacity: 0;
}
.add-new-button:hover .add-new-button-label {
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-new-button">
<div class="add-new-button-label">
Add
</div>
<div class="add-new-button-icon">
<i class="fa fa-plus"></i>
</div>
</div>
It seems (to me) that your button doesn't need to have position: fixed;. All it need is some sufficient space to roll out.
#container {
border: 2px black solid;
display: flex;
justify-content: flex-end;
width: 200px;
}
.add-new-button {
position: relative;
width: 40px;
height: 40px;
background-color: #1BA1FC;
border-radius: 40px;
transition: width 0.3s;
overflow: hidden;
cursor: pointer;
}
.add-new-button-icon {
top: 0;
right: 0;
z-index: 4;
position: absolute;
color: #fff;
transition: transform 0.2s;
width: 40px;
height: 40px;
}
.add-new-button-icon i {
top: 12px;
height: 100%;
margin-left: 14px;
position: relative;
}
.add-new-button:hover {
width: 110px;
}
.add-new-button:hover .add-new-button-icon {
transform: rotate(90deg);
}
.add-new-button-label {
width: 80px;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
font-family: "Source Sans Pro", sans-serif !important;
font-weight: 700;
position: relative;
margin-top: 5px;
padding-left: 10px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
opacity: 0;
}
.add-new-button:hover .add-new-button-label {
transition-delay: 0.1s;
visibility: visible;
opacity: 1;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container">
<div class="add-new-button">
<div class="add-new-button-label">
Add
</div>
<div class="add-new-button-icon">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
Related
I am trying to build an underline under the nav menu on hover. I'm using the 'content' trick because I couldn't make what I wanted with just text decoration.
I want something like this but with a smooth transition.
Here's the CSS for it without transition because I couldn't make it work.
div {
display: flex;
align-items: center;
color: #ab9b8c;
font-size: 20px;
letter-spacing: 1.5px;
text-decoration: none;
height: 100%;
cursor: pointer;
transition: height 2s;
position: relative;
}
div:hover::after {
content: '';
position: absolute;
bottom: -1px;
width: 30px;
height: 3px;
border-radius: 200px;
border: 1px solid #9f9182;
}
<div>test
<div/>
As Paulie_D mentioned, you can't do transitions on position attributes. See: https://www.w3schools.com/cssref/pr_class_position.asp "Animatable: no."
Several other attributes are fair game though. Here's one using the width and the border:
div {
display: flex;
align-items: center;
color: #ab9b8c;
font-size: 20px;
letter-spacing: 1.5px;
text-decoration: none;
height: 100%;
cursor: pointer;
transition: height 2s;
position: relative;
}
div::after {
content: '';
position: absolute;
bottom: -1px;
width: 0px;
height: 3px;
border-radius: 200px;
border: 0px solid #9f9182;
transition: all 0.2s linear;
}
div:hover::after {
width: 30px;
border: 1px solid #9f9182;
transition: all 0.2s linear;
}
<div>test
</div>
Here's an opacity:
div {
display: flex;
align-items: center;
color: #ab9b8c;
font-size: 20px;
letter-spacing: 1.5px;
text-decoration: none;
height: 100%;
cursor: pointer;
transition: height 2s;
position: relative;
}
div::after {
content: '';
position: absolute;
bottom: -1px;
width: 30px;
height: 3px;
border-radius: 200px;
border: 1px solid #9f9182;
opacity: 0;
transition: all 0.2s linear;
}
div:hover::after {
opacity: 1;
transition: all 0.2s linear;
}
<div>test
</div>
Here's both at once because why not:
div {
display: flex;
align-items: center;
color: #ab9b8c;
font-size: 20px;
letter-spacing: 1.5px;
text-decoration: none;
height: 100%;
cursor: pointer;
transition: height 2s;
position: relative;
}
div::after {
content: '';
position: absolute;
bottom: -1px;
width: 0px;
height: 3px;
border-radius: 200px;
border: 0px solid #9f9182;
opacity: 0;
transition: all 0.2s linear;
}
div:hover::after {
width: 30px;
opacity: 1;
border: 1px solid #9f9182;
transition: all 0.2s linear;
}
<div>test
</div>
So on and so on
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>
So I was trying to make a website where if you click an img, a red block, 100% width, 100% height, covers everything.
body {
margin: 0;
background-color: white;
}
h1 {
font-size: 50px;
text-align: center;
font-family: Raleway;
color: red;
margin-top: 5%;
}
img {
margin-left: auto;
margin-right: auto;
display: block;
}
.redcover {
margin-top: -10%;
position: absolute;
width: 100%;
height: 110%;
background: red;
margin-left: -90%;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
#redcovertoggle:checked~.redcover {
margin-left: 0%;
}
<div class="redcover"></div>
<h1>HERZENSSACHE</h1>
<label>
<input type="checkbox" for="redcovertoggle">
<img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart">
</label>
I already tried for="redcovertoggle" in the label tag, but all it does is make the img stop acting like a label.
To do it with css only you can use :target selector and a link for the image, eg:
body {
margin: 0;
background-color: white;
}
h1 {
font-size: 50px;
text-align: center;
font-family: Raleway;
color: red;
margin-top: 5%;
}
img {
margin-left: auto;
margin-right: auto;
display: block;
}
#redcover {
margin-top: -10%;
position: absolute;
width: 100vw;
height: 100vh;
background: red;
left: -100vw;
z-index: 999;
transition: left 1s;
}
#redcover:target { left:0; }
<body>
<div id="redcover"></div>
<h1>HERZENSSACHE</h1>
<label>
<img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart">
</label>
</body>
I am unsure of what I am doing wrong trying to get a transparent overlay to appear over an image on hover. Initially, I attempted a javascript approach, but that didn't work, so I figured I would try a more light-weight css approach.
Does anyone see why this is not working?
.section2-box {
display: inline-block;
width: 50%;
height: 50%;
border-bottom: 4px solid #FFF;
border-right: 4px solid #FFF;
box-sizing: border-box;
position: relative;
}
.fadeHover {
transition: all .35s ease;
-webkit-transition: all .35s ease;
transition-delay: 0.10s;
-webkit-transition-delay: 0.10s;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.fadeHover:hover .overlay {
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
cursor: pointer;
}
.fadeHover-title {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: #FFF;
display: none;
}
.fadeHover-title.activeHover {
opacity: 1;
}
.fadeHover-description {
font-size: 1.1rem;
color: #FFF;
font-family: 'Open Sans', sans-serif;
display: none;
}
.fadeHover-description.activeHover {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="section2-box fadehover" id="section2box3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg">
<div class="overlay">
<h2 class="fadeHover-title">Option 1</h2>
<h3 class="fadeHover-description">Description</h3>
</div>
</div>
Regardinf your question on the comment : change the text color of the element from a rgba with 0 alpha to a 1 alpha:
.section2-box {
display: inline-block;
width: 50%;
height: 50%;
border-bottom: 4px solid #FFF;
border-right: 4px solid #FFF;
box-sizing: border-box;
position: relative;
}
.fadeHover {
transition: all .35s ease;
-webkit-transition: all .35s ease;
transition-delay: 0.10s;
-webkit-transition-delay: 0.10s;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
}
.fadeHover .overlay {
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
cursor: pointer;
}
.fadeHover-title {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: rgba(255,255,255,0);
transition: color 0.5s;
}
.fadeHover:hover .fadeHover-title {
color: rgba(255,255,255,1);
}
.fadeHover-description {
font-size: 1.1rem;
color: rgba(255,0,0,0);
transition: color 0.5s;
}
.fadeHover:hover .fadeHover-description {
color: rgba(255,0,0,1);
}
<div class="section2-box fadeHover" id="section2box3">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg">
<div class="overlay">
<h2 class="fadeHover-title">Option 1</h2>
<h3 class="fadeHover-description">Description</h3>
</div>
</div>
I have these codes on my site
HTML-
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Twitter</label>
<div id="tab-content1" class="tab-content animated fadeIn">
<a class="twitter-timeline" href="https://twitter.com/1THUGRadio" data-widget-id="521855935606583296">Tweets by #1THUGRadio</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Facebook</label>
<div id="tab-content2" class="tab-content animated fadeIn">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fthugcommunity&width=650&colorscheme=light&show_faces=true&border_color&stream=true&header=true&height=500" frameborder="0" scrolling="yes" style="background: white; border: currentColor; border-image: none; width: 650px; height: 500px; overflow: visible; float: left;" allowtransparency="true">
</iframe>
</div>
</li>
</ul>
as you can see it has the FB and Twitter feeds in it
CSS
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: auto;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 6;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
position: relative;
padding: 15px;
color: white;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
animation-duration: 0.5s;
}
When I put the coding in jfiddle.net everything shows up like it should. But when I drop it in the website only the tabs show up, not the content
First off, thanks for the lack of help I got from everyone. So I figured out it needed to have overflow: visible; not hidden.