Background-clip on Pseudo Element - html

I have a button (which is actually a link using <a>).
I have to use a pseudo-element i.e. ::after
The problem is I want to skew the pseudo-element and then clip it to my original box.
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
}
Button
This is my button without the pseudo-element.
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
}
#hover-skew::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #777;
z-index: -1;
transform: skewX(-30deg) scale(1.3, 1);
-webkit-background-clip: border-box;
overflow: hidden;
transition: transform 200ms ease-in;
}
Button
Notice how it's overflowing? I want it to be of the original size as the box.
I know I have used scale, but it doesn't matter right, also to clarify, I used scale as I have used skew, so scaling makes it fit the box.
Also to clarify, I used skew so that I will scale the ::after element to 0, and the scale it to 1 on :hover to create a nice effect.
I'm trying to copy the style of the button on hover on this website but by using the <a> tag, so if you got any other approach then please comment.
Thank You.

Here is an example:
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
overflow: hidden;
}
#hover-skew:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 120%;
top: 0;
left: -5%;
z-index: -1;
transition: transform .3s ease-out;
transform: translateX(-100%) skew(-10deg);
background-color: #777;
}
#hover-skew:hover:after {
transform: translateX(0) skew(-10deg);
}
Button
Useful sources:
pseudo-element hover

Related

Paypal button interference with navbar?

I tried adding the Paypal smart button to my first project. When the Debit or Credit card button is pressed, the text above it goes through the navbar.
I tried adding additional blank space to the background image, but it did not work.
Is there a way to extend the blank space already made by the Paypal button script?
What can I do to fix it?
Navbar problem
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.4)),url(slike/slika\ 2.JPG);
background-position: center;
background-size: 100%;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 500px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 20px;
position: sticky;
}
.nav-links ul li a{
color: #7814ac;
text-decoration: none;
font-size: 30px;
font-family: 'Lora', serif;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: white;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
margin-top: 200px;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 36px;
color: white;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 12px 34px;
font-size: 24px;
background: transparent;
position: relative;
cursor: pointer;
margin-bottom: 5px;
}
.hero-btn:hover{
border: 1px solid #7814ac;
background: #7814ac;
transition: 1s;
}
The problem would appear to be the container in which all that text is located. Perhaps it has a fixed position or height. The black debit/credit card button needs to be rendered in a container that can expand normally. If for some reason you are not able to change the site's CSS to allow this, you can disable the black button with &disable-funding=card. Other buttons will open the PayPal window normally.

Transition to expand transparent background from middle outward

I want to make a CSS animation to open a transparent background from the center to the border (right and left) and leave the border red with text red and without any background.
Is it possible to do? I think I made a mistake with the class "bottone" but I don't know where!
The button needs to be like this, but with the colors inverted:
.bottone {
background: red;
box-sizing: border-box;
appearance: none;
color: #fff;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>
Here's another attempt:
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: red;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: #fff;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>
Instead of "opening a transparent background", consider "moving two elements to reveal a transparent background". One idea is to use two pseudo-elements, :before and :after, that recede to opposite sides of the box.
In my example, one is left:0 and the other is right:0.
Their widths both transition from 50% to 0.
body {
background-color: lightgreen;
}
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:before,
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
width: 50%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:before {
left: 0;
}
.bottone:after {
right: 0;
}
.bottone:hover:before,
.bottone:hover:after {
width: 0;
}
<a class="bottone">example</a>
Color need to be swapped.
pseudo size needs also to be set and reset on hover.
CSS commented
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;/* inverted*/
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
width: 0%;
height: 100%;
width: 110%;/* moved here */
background: red;
transform: translateX(-50%);
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;/* inverted */
}
.bottone:hover:after {
width: 0;/* reset here */
}
<a class="bottone">example</a>

modifying :before of an element when hovered is not working

I simply want the :before (underline) of my anchor to change its height every time it is hovered over, but it's not working.
I hope someone could help me. Thanks in advance.
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
display: inline-block;
text-decoration: none;
font: 4em Arial;
color: #21a1e1;
font-weight: 300;
position: relative;
}
a:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
background: #21a1e1;
transition: all .3s ease-in-out;
}
/* not working */
a:hover a:before {
height: 4px;
}
<div class="wrapper">
Hover
</div>
use a:hover::before instead of a:hover a:before I'm added the working snippet below.
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
display: inline-block;
text-decoration: none;
font: 4em Arial;
color: #21a1e1;
font-weight: 300;
position: relative;
}
a:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
background: #21a1e1;
transition: all .3s ease-in-out;
}
/* not working */
a:hover::before {
height: 4px;
}
<div class="wrapper">
Hover
</div>

navbar hover effect above horizontal rule

I am designing a new website, and I always spend a lot of time on the navigation bars when I do so. The following code has this intended effect:
HTML:
<div class="navbar">
Home
About
</div>
<hr></hr>
CSS:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
This works in Chrome, Opera, and even some versions of Internet Explorer, but the other browsers can't agree on anything:
Firefox (and some IE versions):
Safari:
here is a code snippet:
hr {
width: 80%;
border: 0;
height: 1px;
margin-top: 0px;
background-color: #000;
}
.navbar {
text-align: center;
}
.navbar a {
display: inline-block;
position: relative;
text-align: center;
color: #000;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
}
.navbar a:after {
content: "";
position: absolute;
background-color: #c00;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.navbar a:hover:after {
width: 100%;
}
<div class="navbar">
Home
About
</div>
<hr>
Is there any way to achieve the intended effect without browser sniffing?
The problem can be solved by doing following steps:
Add reset CSS (could be normalize or Meyer reset CSS)
Set a specific height to navbar and the element as Safari doesn't do well without the height
Applying box-sizing: border-box; for easy
styling without much of calculation between padding, border, margin
within one element.
Beside, I usually use the border of navbar instead of another hr tag for the line under the menu

Vertically center anchor tag text after setting height in css

I have an anchor tag and I have given it a height and a background colour, but I can't get the text to vertically align in the middle of the background colour.
I want there to be equal background colour above and below the text, but the height is all being added below the text. I don't think that I can use padding, given the implementation of this (see the codepen link), I've also tried display: table on the parent and table-cell on the link etc, and applying a line-height.
Here is the code, but the codepen will better explain what I would like to do:
HTML:
<div class="border">
Link
</div>
SCSS:
.border {
display: inline-block;
width: 200px;
height: 70px;
border: 2px solid #2BD6C5;
position: relative;
}
a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 80%;
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
&:hover {
width: 100%;
height: 100%;
}
}
I have modified your code pen code. Please check below code or you can check it on code pen also. http://codepen.io/gauravshankar/pen/MYPEKw
body {
background-color: #1d1f20;
}
.border {
display: table;
width: 200px;
height: 70px;
border: 2px solid #2BD6C5;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
}
.border:hover {
border-spacing: 0px;
}
a {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
}
<div class="border">
Link
</div>
http://codepen.io/gauravshankar/pen/MYPEKw
As long as you only have one line of text in the button, you can use line-height in order to adjust the y-position of your label.
For instance, adding
line-height: 50px;
to your a tag pretty much centers it vertically. You might have to animate it as well though if you want it centered while hovering as well.
Add line-height to <a> Added Demo
a {
line-height:55px;
vertical-align:middle;
}
Edit:
For Hover also you need to specify line-height to align it in middle. You can try like this:
a {
line-height:55px;
}
a:hover {
width: 100%;
height: 100%;
line-height:70px;
position:relative;
}
Updated Demo
body {
background-color: rgb(29, 31, 32);
}
.border {
display: inline-block;
width: 200px;
height: 70px;
border: 2px solid #2BD6C5;
position: relative;
}
a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/*height: 80%;*/
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
padding:12px 0px;
&:hover {
width: 100%;
height: 100%;
}
}
<div class="border">
Link
</div>
remove height use padding
a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 80%; */
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
padding: 12px 0px;
}
You could wrap the anchor in a button and the text will automatically be centered.
JSFiddle
<div class="border">
<button>Link</button>
</div>
a {
color: #FFF;
text-decoration: none;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 80%;
width: 90%;
text-align: center;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
border: none;
cursor: pointer;
&:hover {
width: 100%;
height: 100%;
}
}
Check this code.
body {
background-color: rgb(29, 31, 32);
}
.border {
display: inline-block;
width: 200px;
height: 70px;
border: 2px solid #2BD6C5;
position: relative;
}
a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 80%;
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
line-height: 55px;
}
a:hover{
width: 100%;
height: 100%;
line-height: 70px;
}
<div class="border">
Link
</div>