I am using ASP.NET web form in Visual studio 2013.
I am using the following CSS code snippet for button,
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
and
.button:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
Its working fine for html button, but not properly working for ASP.NET button.
<div class="button-container">
<asp:Button ID="submit" class="button" runat="server" Text="Submit" OnClick="submit_Click" />
<button type="submit" class="button"><span>Submit</span></button>
</div>
Here is my ASP.NET web form
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="OrderTakingUI.aspx.cs" Inherits="ResponsiveWebApplication.OrderTakingUI" %>
<!DOCTYPE html>
<html>
<head>
<title>Orders</title>
<meta charset='UTF-8'>
<style>
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
input,
select,
textarea,
body * {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
box-sizing: border-box;
}
body {
background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);
background-image: linear-gradient(top, #f2f2f2, #e6e6e6);
}
h1 {
font-size: 2rem;
text-align: center;
margin: 0 0 2em;
}
.container {
max-width: 40rem;
margin: 2rem auto;
background: #fff;
width: 100%;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 3rem 5rem 0;
border-radius: 1px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
transition: box-shadow 0.28s ease, transform 0.28s ease;
transition: box-shadow 0.28s ease, transform 0.28s ease, -webkit-transform 0.28s ease;
}
fieldset {
margin: 0 0 3rem;
padding: 0;
border: none;
}
/*------------------------------input type text and textarea and other starts-----*/
.form-inline > .form-group,
.form-inline > .btn {
display: inline-block;
margin-bottom: 0;
}
.form-help {
margin-top: 0.125rem;
margin-left: 0.125rem;
color: #b3b3b3;
font-size: 0.8rem;
}
.form-group input {
height: 1.9rem;
}
.form-group textarea {
resize: none;
}
.form-group select {
width: 100%;
font-size: 1rem;
height: 1.6rem;
padding: 0.125rem 0.125rem 0.0625rem;
background: none;
border: none;
line-height: 1.6;
box-shadow: none;
}
.form-group .input-label {
position: absolute;
top: 0.25rem;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 1rem;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
}
.form-group .bar {
position: relative;
border-bottom: 0.0625rem solid #999;
display: block;
}
.form-group .bar::before {
content: '';
height: 0.125rem;
width: 0;
left: 50%;
bottom: -0.0625rem;
position: absolute;
background: #B73394;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
.form-group input,
.form-group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
box-shadow: none;
}
.form-group input[type="file"] {
line-height: 1;
}
.form-group input[type="file"] ~ .bar {
display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
color: #333;
}
.form-group select ~ .input-label,
.form-group input:focus ~ .input-label,
.form-group input:valid ~ .input-label,
.form-group input.form-file ~ .input-label,
.form-group input.has-value ~ .input-label,
.form-group textarea:focus ~ .input-label,
.form-group textarea:valid ~ .input-label,
.form-group textarea.form-file ~ .input-label,
.form-group textarea.has-value ~ .input-label {
font-size: 0.8rem;
color: gray;
top: -1rem;
left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
outline: none;
}
.form-group select:focus ~ .input-label,
.form-group input:focus ~ .input-label,
.form-group textarea:focus ~ .input-label {
color: #B73394;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
width: 100%;
left: 0;
}
.form-group {
position: relative;
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
/*------------------------------input type text and textarea and other ends-----*/
/*--------------------------------Button starts--------------------------------*/
.button-container {
text-align: center;
}
.button {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #B73394;
margin: 3rem 0;
padding: 0.75rem 3rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
color: #fff;
position: relative;
z-index: 1;
}
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.button:hover {
color: #B73394;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.button:focus {
outline: none;
}
/*--------------------------------Button ends--------------------------------
</style>
</head>
<body>
<div class="container">
<form id="form1" runat="server" method="post">
<div class="form-group">
<asp:DropDownList ID="DropDownList1" runat="server" required=""></asp:DropDownList>
<label for="select" class="input-label">Selectbox</label><i class="bar"></i>
</div>
<div class="form-group">
<asp:TextBox ID="text" runat="server" required="required"></asp:TextBox>
<label for="input" class="input-label">Textfield</label><i class="bar"></i>
</div>
<div class="form-group">
<asp:TextBox id="textarea" TextMode="multiline" Columns="50" Rows="5" runat="server" required="required" />
<label for="textarea" class="input-label">Textarea</label><i class="bar"></i>
</div>
<div class="button-container">
<asp:Button ID="submit" class="button" runat="server" Text="Submit" OnClick="submit_Click" />
<button type="submit" class="button"><span>Submit</span></button>
</div>
</form>
</div>
</body>
</html>
I do not have much experience of using CSS with ASP.NET. I am expecting your help.
If you want to use css class in asp.net control use CssClass instead of class like below.
<asp:Button ID="submit" CssClass="button" runat="server" Text="Submit" OnClick="submit_Click" />
Find out control's id after rendering in client side. Then implement CSS on that id. If you use id instead of css class.
For asp.button you should use CssClass instead class:
<asp:Button ID="submit" CssClass="button" runat="server" Text="Submit" OnClick="submit_Click" />
Related
Good afternoon.
I'm having a problem changing the background color of the checkboxes that are selected.
CheckBox to change
I've seen options on the internet and some questions right here in the stack. But none of them were successful. Below is the DOM image where the elements are inserted.
Dom about element
The last code I tested was this and it still didn't work
input[type=checkbox]:checked:after{
background-color: red !important;
color: blue !important;
}
Aimed to have a background in this color # FFEA00 when checked and the arrow to be # 000 when checked.
Best regards and thanks for the help
Yellow background when checked, black arrow when checked. It's here:
.checkbox-label {
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom {
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>
I am making this project, but when I resize the window the css goes all over. I do not know how to make it responsive while maintaining the look I want
I have tried switching the units to rem but it still does not work
Here is the CSS:
color: whitesmoke;
}
p{
text-align: center;
font-size:15px;
font-family: 'Source Sans Pro', sans-serif;
}
#space_background{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
z-index:-1;
min-height: 100%
}
h1{
position: relative;
z-index:1;
text-align: center;
font-size: 3vw;
font-family: 'Source Sans Pro', sans-serif;
}
#planet{
width: 400px;
height: 400px;
z-index: 1;
display: block;
margin: 0 auto;
vertical-align: middle;
}
#send{
display:block;
margin-left: 45vw;
margin-bottom: 2rem;
margin-top: 1rem;
text-align: center;
/* position: relative; */
padding: 1vw 1.3vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(64, 240, 10, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#send:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#divSend{
text-align: center;
}
#next{
display:block;
margin-left: 46.25vw;
margin-top: 5rem;
margin-bottom: 5px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#next:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#nextDiv{
text-align: center;
}
#atmo{
display:block;
float: left;
margin-left: 9.5vw;
margin-right: 1vw;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#atmo:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#rot{
float: right;
margin-right: 1vw;
float: left;
display:block;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#rot:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#core{
display:block;
float: left;
margin-right: 31vw;
float: left;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#core:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#goldi{
display:block;
float: right;
float: left;
margin-right: 1rem;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#goldi:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);+
}
#stable{
display:block;
float: left;
float: left;
margin-right: 1rem;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#stable:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#water{
display:block;
margin-bottom: 20px;
text-align: center;
position: relative;
padding: 0.5vw 0.8vw;
top: -30px;
max-width: 100%;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
border-radius: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(102, 102, 102, 0.795);
color: #fff;
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#water:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#firstThree{
margin-left: 9.5vw;
}
#lastThree{
margin-left: 66vw;
margin-top: -18px
}
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Vitae Vinctum</title>
<link rel="stylesheet" type="text/css" href="start_style.css">
<link href="https://fonts.googleapis.com/css?family=Abel|Source+Code+Pro&display=swap" rel="stylesheet">
<!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
</head>
<body>
<video playsinline="playsinline" autoplay muted loop id="space_background">
<source src="imgs/Space_Background.mp4" type="video/mp4">
<img src="imgs/background.jpg" title="Your browser does not support video">
</video>
<h1>The Search for Life Begins...</h1>
<div>
<img id="planet" src="imgs/planet.png">
</div>
<div id="nextDiv">
<button id="next">Next Planet</button>
</div>
<div id="divSend">
<button id="send">Send Expedition</button>
</div>
<div>
<button id="atmo">Atmospheric Test</button>
<button id="rot">Send Expedition</button>
</div>
<div>
<button id="core">Send Expedition</button>
<button id="goldi">Send Expedition</button>
</div>
<div>
<button id="stable">Send Expedition</button>
<button id="water">Send Expedition</button>
</div>
<div id="testResponse">
<p></p>
<p id="atmoText">test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<script src="index.js"></script>
</body>
</html>
It works at full resolution but as soon as the window resizes, it goes wack
You can use both width and max-width properties for one css object:
#planet {
width: 400px;
height: 400px;
max-width: 100%;
z-index: 1;
display: block;
margin: 0 auto;
vertical-align: middle;
}
To make your objects responsive, you should use media queries.
#media screen and (max-width: 400px) {
#planet {width: 100%}
}
#media screen and (min-width: 401px) and (max-width: 700px) {
#planet {width: 75%;}
}
#planet {width: 50%;}
Why doesn't my animation "roll back" (animated) when the mouse leaves the button, just like it does when the mouse enters the button?
.container {
padding: 20px 0 0 10px;
}
.button {
color: #ffffff;
background: #71b3c7;
text-decoration: none;
-webkit-backface-visibility: hidden;
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
position: relative;
text-align: center;
padding: 8px 14px;
font-size: 20px;
text-transform: uppercase;
font-family: "Open Sans", Arial, sans-serif;
font-weight: bold;
letter-spacing: 1.4px;
}
.button span {
position: relative;
z-index: 2;
}
.button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transform: scale3d(0.1, 1, 1);
transform: scale3d(0.1, 1, 1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform-origin-x: 0;
}
.button:hover {
color: #fff;
}
.button:hover:before {
opacity: 1;
background: #2a9276;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<div class="container">
<span>button</span>
</div>
CodePen link
Trying to create a slide right transition on a button. If I remove the .container background color the transition works. But I want the button to start black and change to yellow while keeping the container color as default. But the output seems different. It will only transition to yellow if the button background is transparent. Any help is appreciated, been racking my brain way too long on this.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
I adjust the code a bit and now the container is working well even with black background set. Its now animating from black to yellow. Additionally, I have also removed yellow border to create slick animation look.
Here is the working snippet.
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
z-index: 1;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
background-color: black;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
<div class="container">
<p>Register</p>
</div>
As you've written it, your ::before pseudo-element is below the .container element, because both the .container and the anchor (a) are on the same z-index.
To place it in-between the anchor and the container, you need to make your anchor being above the container on the z-axis, i.e, set its z-index.
a.animated-button.thar-three {
color: #fff;
cursor: pointer;
display: block;
position: relative;
border: 2px solid #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
/* place it at a higher z-index than its parent ... */
z-index: 1;
}
a.animated-button.thar-three:before {
display: block;
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
/* ... to make this be in-between .container and the a */
z-index: -1;
content: '';
color: #000 !important;
background: #F7CA18;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.container {
background: #F0F0F0;
margin: 20px 20%
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
}
a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link,
a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size: 14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button.thar-three:hover {
color: #000 !important;
}
a.animated-button.thar-three:hover:before {
left: 0%;
right: auto;
width: 100%;
}
<div class="container">
<p>Register</p>
</div>
I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/
How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}
What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}