I designed a blue button with a white text on it, but the blue effect on the button prevents the white text and destroys the text. How can I complete the text without destroying the effect?
.button {
position: relative;
top: -250px;
left: 200px;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #fff;
outline: 2px solid #0059f3;
padding: 30px 60px;
overflow: hidden;
transition: color 1s;
}
.button:hover {
color: #0059f3;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -50px;
z-index: 0;
width: 150%;
height: 100%;
background-color: #0059f3;
transform: scaleX(0) skewX(35deg);
transform-origin: left;
transition: transform 1s;
}
.button:hover::before {
transform: scaleX(1) skewX(35deg);
}
Related
It's hard to explain this. I'm trying to do something like this:
https://codepen.io/pen/yLBaJOq
.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
}
.button:hover:before {
padding-top: 200%;
}
But there's a thin line between the border and the element. Like the pseudo-element :before is not filling out the parent 100%. Image of what I mean:
It's happening in all browsers I'm trying (Chrome, FF, Safari, all Mac).
So I'm wondering if I can prevent this from happening, while still keeping a similar hover effect.
I could of course just use the transition on the background color and scrap the idea with the pseudo-element as the background.
Add background color to the button hover.
Change:
.button:hover {
color: #fff;
border: 9px solid red;
}
to:
.button:hover {
color: #fff;
border: 9px solid red;
background-color: red;
}
.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
background: red;
}
.button:hover:before {
padding-top: 200%;
}
<div class="button">WOAH</div>
I'm trying to achieve div border in the convex shape and on hover it should be in normal square shape. I have added in the bottom as same I want to add on the top I tried using before but unable to achieve the result. Can anyone help me Below is my code so far I have done.
Any help will be appreciated
* {
box-sizing: border-box;
}
.services {
position: relative;
width: 500px;
height: 420px;
margin: 100px;
background-color: #cccccc;
transition: all 0.2s ease;
animation: down-bump 0.4s ease;
}
.services:before {
}
.serv_section {
top: 83%;
position: relative;
overflow: hidden;
padding: 50px 0 0;
}
.serv_inner {
position: relative;
background: #fff;
height: 25px;
}
.serv_inner:after {
box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: -150px;
transition: all 0.4s ease-in-out;
}
.services:hover .serv_inner:after {
top: -120px;
}
.serv_inner:before {
/* box-shadow: 0 0 0 80px #fff;
border-radius: 100%;
position: absolute;
height: 150px;
content: '';
right: -20%;
left: -20%;
top: 130px;
transition: all 0.4s ease-in-out; */
}
span.image_caption {
position: absolute;
color: red;
padding: 10px 20px;
font-size: 30px;
z-index: 10;
animation-duration: 2.5s;
animation-fill-mode: both;
}
span.image_caption p {
font-size: 32px;
font-weight: 900;
font-family: 'Dancing Script', cursive;
color: cadetblue;
}
<div class='services'>
<div class="serv_section">
<div class="serv_inner">
</div>
</div>
</div>
You can use the before and after elements to make the curve, on hover hide the psuedo elements behind the element and remove the curve like this:
.services {
position: relative;
width: 100px;
height: 60px;
margin: 100px;
background-color: #cccccc;
z-index: 0;
}
.services:hover:before{
top: 0px;
border-radius: 0;
}
.services:hover:after{
bottom: 0px;
border-radius: 0;
}
.services:before, .services:after{
content: ' ';
position: absolute;
width: 100%;
height: 40px;
background-color: #cccccc;
border-radius: 50%;
z-index: -1;
transition: all .4s;
}
.services:before {
top: -20px;
}
.services:after {
bottom: -20px;
}
<div class='services'>
</div>
If I understand it right you can achieve this by simple using of different values for horizontal and vertical dimensions of the border-radius property (more info at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius):
div {
background: grey;
height: 100px;
width: 200px;
transition: border-radius .15s ease-out;
}
/* border-radius on default state */
div {
border: 4px solid black;
border-radius: 50%/20px;
}
div:hover {
border-radius: 0;
}
<div></div>
I am making buttons by using the anchor tag. I want to make an effect but it is not working as expected. pseudo-element is flowing over the button and text is also being hidden as well. But I want something like this, the pseudo-element will be in between the button and background.
section {
padding: 80px 0;
}
section.one {
background: #76B39D;
}
.button {
color: white;
margin: 10px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
}
.button-type-1 {
border: 2px solid #fff;
padding: 10px 33px;
overflow: hidden;
position: relative;
}
.button-type-1:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
background: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
z-index: 0;
transition: all 0.4s ease;
}
.button-type-1:hover:after {
width: 200px;
height: 200px;
}
.button-type-1:hover,
.button-type-1:focus {
text-decoration: none;
}
<section class="one">
read
</section>
I like to do, the pseudo element background will be fit to button size on hover.
And the button text will also be seen but i thing z-index is messed up somewhere or anything else.
z-index 1 your relative .button-type-1 and -1 the :after pseudo.
Also, make your button inline-block to prevent the :after element overflow
section {
padding: 80px 0;
}
section.one {
background: #76B39D;
}
.button {
color: white;
margin: 10px;
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
}
.button-type-1 {
border: 2px solid #fff;
padding: 10px 33px;
overflow: hidden;
position: relative;
display: inline-block;
z-index:1;
}
.button-type-1:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
background: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
z-index: -1;
transition: all 0.4s ease;
}
.button-type-1:hover:after {
width: 200px;
height: 200px;
}
.button-type-1:hover,
.button-type-1:focus {
text-decoration: none;
color:#000;
}
<section class="one">
read
</section>
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 5 years ago.
I have this project:
https://jsfiddle.net/3xw9aqew/
When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.
.image-container:hover .overlay {
opacity: 0.3;
}
I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: red;
border:10px solid green;
box-sizing:border-box;
}
How can i achieve this?
For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.
opacity applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, the
element and its children all have the same opacity relative to the
element's background, even if they have different opacities relative
to one another.
opacity - CSS | MDN
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
Updated JSFiddle
Code Snippet Demonstration:
var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");
//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
lorem.classList.toggle("hdr-color-white");
ipsum.classList.toggle("hdr-color-white");
lorem.classList.toggle('hdr-left-middle');
ipsum.classList.toggle('hdr-right-middle');
});
body {
max-width: 100%;
overflow-x: hidden;
background: yellow;
font-family: sans-serif;
}
.container {
width: 85%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
max-width: 920px;
}
p {
font-size: 18px;
color: blue;
font-weight: bold
}
p.left {
position: absolute;
top: 0;
bottom: 0px;
right: -32%;
transform: rotate(-90deg);
}
p.right {
position: absolute;
top: 0;
bottom: 0;
left: -32%;
transform: rotate(90deg);
}
h2 {
font-size: 5em;
position: absolute;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin: 0;
z-index: 5;
color: blue;
transition: all 0.5s ease-in-out;
}
.hdr-color-white {
color: white;
}
.hdr-left {
left: -12%;
top: -35%;
}
.hdr-left-middle {
left: 7%;
top: 40%;
}
.hdr-right {
right: -10%;
top: 110%;
}
.hdr-right-middle {
right: 7%;
top: 40%;
}
/*Hovers*/
.container:hover {
cursor: pointer
}
.container:hover>p {
color: red;
}
.container .image-container:hover {}
/*Hovers Ends*/
/*Overlay*/
.image-container {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image {
display: block;
width: 100%;
height: auto;
outline: 5px solid blue;
}
.container .image-container:hover>.image {
outline: none;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
/*Overlay Ends*/
<div class="container">
<!--Rotated Text-->
<p class="right">Harolds</p>
<p class="left">Harolds</p>
<!--//Rotated Text-->
<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>
<div class="image-container" id="imgContainer">
<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
<!--colour overlay-->
<div class="overlay"></div>
<!--//colour overlay-->
</div>
<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>
</div>
I need to center horizontally a button with aboslute position (because it must keep on top when to click and launch overlay and click to close overlay) on a position fixed topbar, here is the code:
.topbar {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
Thats is just the css of the three parts, the website is more complex but i think that 3 parts are the key. the topbar must be fixed on top, the buton have to be centered into the topbar div, and the overlay launch and the buttop keeps on top of the overlay.
What is working: the overlay works fine and the button keeps on top but its not horizontally centered on the topbar.
How i can hack this?
You could to the left:0 and right:0 trick.
.button {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0; /*added*/
right: 0; /*added*/
}
Or do the left:50% with negative left margin (half width).
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
margin-left: -30px; /*added*/
}
Or use CSS3 transform.
.button {
display: inline-block;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 50%; /*added*/
transform: translateX(-50%); /*added*/
}
Based on the information you provided this is what I could come up with:
/* CSS */
.topBar {
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
background-color:#29343a;
}
.overlay {
display:none;
width: 100%;
background: rgba(153,204,51,0.9);
margin:0;
}
.button, .button:active, .button:visited, .button:hover {
display: block;
position:relative;
text-align:center;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
margin:0 auto;
padding:10px;
}
.topBar:hover > .overlay {
display:block;
}
And I added some html because you didn't provide any:
<!-- HTML -->
<div class="topBar">
Button
<div class="overlay">
<p>Some text shows when button hover</p>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/0napm6y3/
Here is the complete code of this component made on react:
This is the react component, the overlay launch is the overlay var, the other one is for one animation on the button:
var React = require('react');
var StatusBarButtonView = React.createClass({
getInitialState: function() {
return {cliked: false};
},
handleClick: function(event) {
this.setState({cliked: !this.state.cliked});
},
render: function() {
var fondo = this.state.cliked ? 'active' : '';
var overlay = this.state.cliked ? 'open' : '';
return (
<div>
<div className={"aui-profit-statusbar-button-container " + (fondo)} onClick={this.handleClick}>
<img src="images/aui-navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
</div>
<div className={"overlay overlay-slidedown " + (overlay)}>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
);
}
});
module.exports = StatusBarButtonView;
Here is the topbar scss:
.aui-profit-statusbar-container {
text-align: center;
min-width: 100%;
height: 50px;
background-color: #29343a;
position: fixed;
top: 0;
}
Here is the button scss:
.aui-profit-statusbar-button-container {
display: inline-block;
margin-right: auto;
margin-left: auto;
width: 60px;
height: 50px;
cursor: pointer;
background-color: #00c1e2;
border-bottom: 2px solid #00a8c6;
z-index: 100;
position: absolute;
left: 0;
right: 0;
&:hover {
background-color: #56d9f6;
}
&.active {
background-color: #ff4b39;
border-bottom: 2px solid #e43f30;
}
.rotate {
margin-top: 13px;
width: 23px;
height: 23px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-ms-transition-duration: 0,2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.active {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
}
Here is the overlay css:
/* Overlay style */
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(153,204,51,0.9);
}
/* Overlay closing cross */
.overlay .overlay-close {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
overflow: hidden;
border: none;
background: url(../img/cross.png) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}
/* Menu style */
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay ul li a {
font-size: 54px;
font-weight: 300;
display: block;
color: #fff;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #e3fcb1;
}
/* Effects */
.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}
.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
#media screen and (max-height: 30.5em) {
.overlay nav {
height: 70%;
font-size: 34px;
}
.overlay ul li {
min-height: 34px;
}
}
Now it works perfectly, thanks to all.
Next thing i have to do is separate overlay of buttom component. and keep it running, but im wondering to to pass the action to one component to another.... i have to learn more about react.js