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>
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I'm trying to create a continue button that shows a right pointing arrow in a hover state. I also want the arrow to be centered.
I've tried adding .icon-arrow-right:before {content: "&rarr";}
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "#";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I would like the arrow to be to the right of the button text in a hover state. I would also like the arrow to be centered with the button text.
Make your pseudo element into the triangle you desire:
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
This uses the awesome transparent border trick to make the element box appear as a triangle. Change the border widths to alter the size of the triangle, notice the border with color is twice as wide as the transparent sides. You can play with these values to nuance the triangle how you like.
I also changed how you are positioning the text in the button:
.btn {
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
border: 3px solid #fff;
}
By using line-height this way you can guarantee your text will be vertically centered in the button at any font-size.
Check out the full working example:
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
margin-top: 21px;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid white;
border-bottom: 7px solid transparent;
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
I have vertically centered the arrow with top:50%;transform:translateY(-50%);. I removed the line-height and height CSS from the .btn pseudo element because they weren't needed. I have just used > for the arrow, but you can use something like fontawesome to get a nice icon.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
}
.btn:before {
position: absolute;
font-size: 125%;
color: #fff;
transition: all 0.3s;
left: 130%;
top:50%;
transform:translateY(-50%);
}
.icon-arrow-right:before {
content: ">";
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</button>
Just expanding on #BugsArePeopleToo 's answer, using borders ans transforms to keep the ">" shape the OP wanted.
body {
background: #00b894;
}
.btn {
font-size: 14px;
background: none;
padding: 0 80px; /* padding on sides only */
height: 64px; /* height of the button you want */
line-height: 58px; /* same as height minus the border-top and border-bottom */
display: inline-block;
margin: 15px 30px;
position: relative;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.btn:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
transition: all 0.3s;
left: 130%;
top: 0;
}
.icon-arrow-right:before {
content: "";
width: 0.5em;
height: 0.5em;
position:absolute;
top:50%;
border-top:2px solid #fff;
border-right:2px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.btn:hover:before {
left: 80%;
}
<button class="btn icon-arrow-right">Continue</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>
I use custom checkboxes on my website. My problem is that the Chrome and Firefox visual puts me a small white frame as illustrate by figure bellow:
QUESTION: I'm not a web expert and I need some assistance to fix this. Thanks in advance.
CSS:
input[type="checkbox"] {
position: relative;
display: inline-block;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
height: 25px;
width: 50px;
font-size: 25px;
border-radius: 1.5em;
background-color: #222;
border-color: transparent;
background-clip: padding-box;
color: white;
vertical-align: middle;
-webkit-transition: all 0.25s linear 0.25s;
transition: all 0.25s linear 0.25s;
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 50%;
background-color: white;
border-radius: 100%;
border: 0.125em solid transparent;
background-clip: padding-box;
z-index: 3;
-webkit-transform-origin: right center;
transform-origin: right center;
}
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: 1;
}
input[type="checkbox"]:focus {
color: white;
border-color: transparent;
background-color: #919FAF;
outline: none;
}
td input[type="checkbox"]:checked {
color: white;
background-color: rgba(128, 201, 20,1);
border-color: transparent;
}
HTML:
<input type="checkbox" onchange="check_prop()"/>
This fixes it for Chrome. I have not tried it for firefox. Changed the z-index to -1.
input[type="checkbox"]::after {
position: absolute;
left: 0.675em;
top: 0;
line-height: 2;
font-family: "Ionicons";
content: "";
letter-spacing: 1em;
z-index: -1;
}
i have a codepen where the react functionality works fine...
but when I transfer into another codepen with same code its not working...due to the below link tag...
can you guys tell me how to make the current code working without this link tag...with a normal css
providing my code below..
working code
http://codepen.io/anon/pen/qbgxdb
not working code
http://codepen.io/anon/pen/YwBeWZ
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 7px;
left: 8px;
cursor: pointer;
}
.fa-times-circle {
opacity: 0;
color: #d9d9d9;
font-size: 20px;
position: absolute;
top: 12px;
right: 8px;
transition: opacity 0.4s ease-out;
cursor: pointer;
}
.search-input {
position: absolute;
cursor: default;
left: 45px;
top: 6px;
width: 0;
padding: 5px;
border: none;
outline: none;
font-size: 18px;
line-height: 20px;
background-color: rgba(255, 255, 255, 0);
transition: width 0.4s ease-out;
}
Just improve the css and it will work even without the font awesome link.
.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
/* ------------------------- just add the css below */
height: 100%;
width: 100%;
border-radius: 50%;
}
Here is the working PEN
You can also specify exact pixel value as
height: 46px;
width: 46px;
as you outer div is with 50px height and 50px width with 2px border equals 46px height and 46px width as it has inherited box-sizing: border-box;