I have a problem in chrome. I set a before statement to my class .button to make an animation on hover, but the end of the ::before is crop :
http://i.stack.imgur.com/s558b.gif
And the code source :
body {
background:#000;
}
.button {
display: inline-block;
position: relative;
cursor: pointer;
padding: 12px 24px 14px 24px;
box-shadow:inset 0 0 0 2px #0282d1;
border-radius: 999px;
overflow: hidden;
z-index: 10;
}
button {
border:0;
background:none;
color:#fff;
}
button::before {
content: '';
z-index: -1;
position: absolute;
top: 50%;
right: 100%;
margin: -15px 0 0 1px;
width: 30px;
height: 30px;
background: linear-gradient(to right, #02AFF1, #0057A3);
transform-origin: 0 50%;
transform: scale3d(1, 2, 1);
transition: transform 300ms ease-in, opacity 300ms ease-in;
border-radius: 999px;
vertical-align: middle;
}
.button:hover::before {
transform: scale3d(9, 9, 1);
}
<button class="button">ACCUEIL</button>
I can't find solution on google.
It's works on safari & firefox.
Thanks.
Related
I tried making a styled checkbox but only works when i use Position: absolute in css but the problem is that it makes it should move with the screen when scrolling instead of staying in one place like a regular checkbox The code is down bellow with the HTML "AND" the CSS
i really appreciate you trying to help if you did
When i change the positioning the checkbox gets squished and hideous looking
background-color: #f3f3f3;
}
.bg-container {
top: 20%;
width: 100%;
}
#_checkbox {
display: none;
}
label {
position: absolute;
top: 7rem;
right: 0px;
left: 0px;
width: 20px;
height: 20px;
margin: 0 auto;
background-color: #f72414;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0 7px 10px #ffbeb8;
cursor: crosshair;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
border: 2px solid rgba(0, 0, 0, 0.44);
}
label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 10px;
height: 10px;
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: inset 0 7px 10px #ffbeb8;
transition: 0.2s ease width, 0.2s ease height;
}
label:hover:before {
width: 1px;
height: 1px;
box-shadow: inset 0 7px 10px #ff9d96;
}
label:active {
transform: translateY(-50%) scale(0.9);
}
#_checkbox:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}
#_checkbox:checked + label:before {
width: 0;
height: 0;
}
<form>
<input type="checkbox" id="_checkbox">
<label for="_checkbox">
<div id="tick_mark"></div>
</label>
</form>
I am trying to re-create Twitch's hover effect when hovering over game art.
https://imgur.com/ukqAxha
I have tried using clip-path, but cannot get the correct shape I am looking for. I'm not even sure if clip-path is what I should be using nor if my code would be the best for re-creating this type of effect.
https://codepen.io/thomaschsu/pen/Rwwwgex
.img-full {
position: absolute;
width: 18rem;
margin: 50px;
transition: transform 0.1s ease;
max-height: 50vh;
max-width: 35vh;
}
.box {
position: relative;
top: 11vh;
left: 11vh;
height: 47vh;
width: 35vh;
background-color: #9147ff;
z-index: -1;
display: none;
clip-path: polygon(100% 0, 100% 85%, 92% 100%, 0 100%, 0 20%, 20% 0);
}
.img-full:hover {
transform: translate(5%, -2%);
}
.img-full:hover + .box {
display: block;
}
Here is an idea with border and gradient:
img {
width:150px;
margin:20px;
border:0 solid transparent;
border-image:linear-gradient(-45deg,transparent 14px,red 15px calc(100% - 15px), transparent calc(100% - 14px)) 10;
transition:0.3s all;
}
img:hover {
border-left-width:10px;
border-bottom-width:10px;
margin-top:10px;
}
<img src="https://i.imgur.com/cFeWhuf.jpg">
Same trick with padding and background:
img {
width:150px;
margin:20px;
padding:0;
background:linear-gradient(-45deg,transparent 6px,red 7px calc(100% - 7px), transparent calc(100% - 6px));
transition:0.3s all;
}
img:hover {
padding:0 0 10px 10px;
margin-top:10px;
}
<img src="https://i.imgur.com/cFeWhuf.jpg">
you can also use a shadow
.img-banner {
float:left;/* ?? for the demo */
}
.img-full {
width: 18rem;
margin: 20px;
transition: 0.1s ease;
max-height: 50vh;
max-width: 35vh;
display:block;
}
.img-full:hover {
transform: translate(5%, -2%);
box-shadow:-1px 1px #9147ff, -2px 2px #9147ff, -3px 3px #9147ff, -4px 4px #9147ff, -5px 5px #9147ff, -6px 6px #9147ff, -7px 7px #9147ff, -8px 8px #9147ff;
}
<div class="img-banner">
<img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>
<div class="img-banner">
<img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>
<div class="img-banner">
<img class="img-full" src="https://i.imgur.com/cFeWhuf.jpg">
</div>
I've been taking a look at the website and I think they are using two invisible corners that turn to visible and flipped when the image is hovered.
I've forked your codepen and did something with this idea, check out:
https://codepen.io/ograu/pen/xxxxLLX
.img-banner {
background: #9147ff;
position: relative;
max-height: 50vh;
max-width: 35vh;
width: 18rem;
margin: 50px;
}
.img-banner:hover .corner {
transform: rotate(-45deg) scaleX(1);
transition-delay: 75ms;
display: block;
}
.img-full {
width: 100%;
height: 100%;
transition: transform 0.1s ease;
display: block;
}
.img-full:hover {
transform: translate(9px, -9px);
}
.corner {
background: #9147ff;
height: .8rem;
transition: transform .1s ease;
width: .8rem;
position: absolute;
display: none;
}
.top-left {
top: -5px;
left: 2px;
}
.bottom-right {
bottom: 4px;
right: -5px;
}
1. The obvious solution (with bad performance)
You could do this with box-shadow and triangular before and after pseudo elements. The bad thing here is the performance. The good thing is that if pseudo elements OR transitions are not supported, you still get a nice result (a purple box shadow).
.imgholder {display: inline-block; position: relative; left: 0; bottom: 0; box-shadow: 0px 0px 0px 0px #9147ff;}
.imgholder img {display: block; width: 200px; height: 100px;}
.imgholder:hover {box-shadow: -6px 6px 0px 0px #9147ff; position: relative; left: 6px; bottom: 6px;}
.imgholder::after {content: ""; position: absolute; right: 0; width: 0; height: 0; border: 0px solid transparent; border-top: 0px solid #9147ff;}
.imgholder:hover::after {border: 6px solid transparent; border-top: 6px solid #9147ff;}
.imgholder::before {content: ""; position: absolute; top: 0;left: 0; width: 0; height: 0; border: 0px solid transparent; border-right: 0px solid #9147ff; margin-left: 0px;}
.imgholder:hover::before {border: 6px solid transparent; border-right: 6px solid #9147ff; margin-left: -12px;}
.imgholder, .imgholder::before, .imgholder::after {transition: all 0.1s linear;}
<br /><div class="imgholder"><img src="https://i.imgur.com/ukqAxha.gif" /></div>
2. The solution Twitch used (with good performance)
This one is really clever. It uses 'scale' and a small rotated square (45 degrees). Note that the squares have a different transform-origin and a different rotation (direction). Performance and graceful degredation are both pretty good. This seems like the optimal solution to me.
*{font-size: 14px;}
.imgholder {
background: #9147ff;
display: inline-block;
position: relative;
}
.imgholder img {
transition: all 0.1s ease;
display: block;
width: 200px;
height: 100px;
transform: translate3d(0,0,0);
}
.imgholder:hover img {
transform: translate3d(.6rem,-.6rem,0);
transition-delay: 75ms;
}
.corner_bottom_right, .corner_top_left {
left: 0;
top: 0;
width: .8rem;
height: .8rem;
transition: all 0.1s ease;
transform: rotate(-45deg) scale(0);
background: #9147ff;
position: absolute; z-index: 0;
transform-origin: 0% 0%;
}
.corner_bottom_right {
left: auto;
top: auto;
right: 0;
bottom: 0;
transform: rotate(45deg) scale(0);
transform-origin: 100% 100%;
}
.imgholder:hover .corner_bottom_right,
.imgholder:hover .corner_top_left {
transform: rotate(-45deg) scale(1);
transition-delay: 75ms;
}
.imgholder:hover .corner_bottom_right {
transform: rotate(45deg) scale(1);
}
<br /><div class="imgholder">
<div class="corner_top_left"></div>
<div class="corner_bottom_right"></div>
<img src="https://i.imgur.com/ukqAxha.gif" />
</div>
3. Minimum amount of code (with some glitches)
The previous solutions required a lot of code. This one uses a minimum amount of code and uses the box-shadow property. I like the simplicity, but note that this solution might not look smooth on a retina display. Additionally, hovering the bottom shadow glitches and the timing seems a bit off in Firefox.
img {width: 200px; height: 100px; transition: all 0.1s ease;}
img:hover {
transform: translate(8px, -8px);
box-shadow: -1px 1px #9147ff,
-2px 2px #9147ff,
-3px 3px #9147ff,
-4px 4px #9147ff,
-5px 5px #9147ff,
-6px 6px #9147ff,
-7px 7px #9147ff,
-8px 8px #9147ff;
}
<br /><img src="https://i.imgur.com/ukqAxha.gif" />
4. Using clip-path (great performance)
The question really inspired me to create a clip-path solution. I used fixed sizes to make it easier to understand. The solution requires some smart cropping, using overflow: hidden.
.imgholder {
position: relative;
display: inline-block;
width: 200px;
height: 100px;
overflow: hidden;
transition: all 0.1s ease;
bottom: 0;
}
.imgholder img {
margin-top: -8px;
margin-right: -8px;
position: relative;
display: block;
width: 200px;
height: 100px;
transition: all 0.1s ease;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
}
.clippath {
margin-top: -8px;
margin-right: -8px;
position: absolute;
top: 0;
left: 0;
width: 208px;
height: 108px;
background-color: #9147ff;
clip-path: polygon(0px 108px, 200px 108px, 208px 100px, 208px 0px, 8px 0px, 0px 8px);
transition: all 0.1s ease;
}
.imgholder:hover img,
.imgholder:hover .clippath {
margin-top: 0;
}
.imgholder:hover img {
transform: translate(8px, -8px);
}
.imgholder:hover {
width: 208px;
height: 108px;
bottom: 8px;
margin-bottom: -8px;
}
<br />
<div class="imgholder">
<div class="clippath"></div>
<img src="https://i.imgur.com/ukqAxha.gif">
</div>
<br /><br />
<div class="clippath" style="position: relative;"></div>
I came across this pen which is a really cool floating share button. Here's the link:
http://codepen.io/koenigsegg1/pen/pjeJvb
HTML
#import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
body {
background: #00BCD4;
min-height: 100vh;
overflow: hidden;
font-family: Roboto;
color: #fff;
}
h1 {
font: 200 60px Roboto;
text-align: center;
}
p.credits {
text-align: center;
margin-top: 100px;
}
.credits img {
border-radius: 50%;
width: 100px;
}
.container {
bottom: 0;
position: fixed;
margin: 1em;
right: 0px;
}
.buttons {
box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.buttons:active,
.buttons:focus,
.buttons:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.buttons:not(:last-child) {
width: 40px;
height: 40px;
margin: 20px auto 0;
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
.container:hover .buttons:not(:last-child) {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 15px auto 0;
}
/* Unessential styling for sliding up buttons at differnt speeds */
.buttons:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms; background-image: url('http://cbwconline.com/IMG/Share.svg'); background-size: contain; } .buttons:not(:last-child):nth-last-child(2) { -webkit-transition-delay: 50ms; transition-delay: 20ms; background-image: url('http://cbwconline.com/IMG/Facebook-Flat.png');
background-size: contain; } .buttons:not(:last-child):nth-last-child(3) { -webkit-transition-delay: 75ms; transition-delay: 40ms; background-image: url('http://cbwconline.com/IMG/Twitter-Flat.png'); background-size: contain; } .buttons:not(:last-child):nth-last-child(4)
{
-webkit-transition-delay: 100ms; transition-delay: 60ms; background-image: url('http://cbwconline.com/IMG/Google%20Plus.svg'); background-size: contain; } /* Show tooltip content on hover *
[tooltip]: before {
bottom: 25%;
font-family: arial;
font-weight: 600;
border-radius: 2px;
background: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
visibility: hidden;
opacity: 0;
padding: 5px 7px;
margin-right: 12px;
position: absolute;
right: 100%;
white-space: nowrap;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
visibility: visible;
opacity: 1;
}
<body>
<h1>Simple Share FAB</h1>
<p class="credits">
<a href="http://codepen.io/koenigsegg1" target="_blank">
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg" />
</a>
<br />Pen by Kyle Lavery (#koenigsegg1)</p>
<nav class="container">
<a class="buttons" tooltip="Share" href="#"></a>
</nav>
</body>
In the demo, you can see that if you hover on the share button, the other buttons pop up, and each button has a different tooltip.
Now, what I want to do is make all those tooltips visible as soon as the share button is hovered, instead of displaying them when that particular button is hovered. Is it possible to do using pure css? I can't seem to figure it out.
It is simply a matter of toggling the visibility value of the CSS elements for [tooltip] attribute.
Also, remove the [tooltip]:hover:before and [tooltip]:hover:after properties.
#import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
body {
background: #00BCD4;
min-height: 100vh;
overflow: hidden;
font-family: Roboto;
color: #fff;
}
h1 {
font: 200 60px Roboto;
text-align: center;
}
p.credits {
text-align: center;
margin-top: 100px;
}
.credits img {
border-radius: 50%;
width: 100px;
}
.container {
bottom: 0;
position: fixed;
margin: 1em;
right: 0px;
}
.buttons {
box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.buttons:active,
.buttons:focus,
.buttons:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.buttons:not(:last-child) {
width: 40px;
height: 40px;
margin: 20px auto 0;
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
.container:hover .buttons:not(:last-child) {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 15px auto 0;
}
/* Unessential styling for sliding up buttons at differnt speeds */
.buttons:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms;
background-image: url('http://cbwconline.com/IMG/Share.svg');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(2) {
-webkit-transition-delay: 50ms;
transition-delay: 20ms;
background-image: url('http://cbwconline.com/IMG/Facebook-Flat.png');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(3) {
-webkit-transition-delay: 75ms;
transition-delay: 40ms;
background-image: url('http://cbwconline.com/IMG/Twitter-Flat.png');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(4) {
-webkit-transition-delay: 100ms;
transition-delay: 60ms;
background-image: url('http://cbwconline.com/IMG/Google%20Plus.svg');
background-size: contain;
}
/* Show tooltip content on hover */
[tooltip]:before {
bottom: 25%;
font-family: arial;
font-weight: 600;
border-radius: 2px;
background: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
/*
visibility: hidden;
opacity: 0;
*/
padding: 5px 7px;
margin-right: 12px;
position: absolute;
right: 100%;
white-space: nowrap;
}
<body>
<h1>Simple Share FAB</h1>
<p class="credits">
<a href="http://codepen.io/koenigsegg1" target="_blank">
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg" />
</a>
<br />Pen by Kyle Lavery (#koenigsegg1)</p>
<nav class="container">
<a class="buttons" tooltip="Share" href="#"></a>
</nav>
</body>
I am trying to create a DP box for the user which is containing a user profile picture in it, where on image hover an edit profile image link will appear, but it is not working. When I hover over on the image it is blinking and the link doesn't appear correctly.
Here is the codepan link click here
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp img:hover ~ .edit-dp a {
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
The blinking glitch is because of that :hover effect of display: block on image instead of container div.
Since every time you :hover on the image you ultimately gonna edit it, so instead of display: none you can set it to opacity: 0 and on :hover you can set it to opacity: 1 and by doing this you'll get a nice transition effect too.
Here's the Snippet for a better view:
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
color: #fff;
font-size: 15px;
text-decoration: none;
opacity: 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.dp:hover .edit-dp a {
opacity: 1;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Solution 1:
Use following css will make your effect nice.
.dp:hover > .edit-dp a{
display: block;
}
Make hover effect on div instead of image
#import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp:hover > .edit-dp a{
display: block;
}
<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
Edit Image
</div>
</div>
Working Codepen
Solution 2:
And Another solution is use pointer-events:none; on hover.
.dp img:hover ~ .edit-dp a{
display: block;
pointer-events:none;
}
Working Codepen
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>