Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
check code
I have share one picture of my website login page below and I want zoom text animation on hover for "Sign In" button which is ...
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
check Image:
From what you described, I believe this is what you want. I've added font-weight:bold; and font-size: 1.4em; to the .inputbtn input:hover{} CSS instruction.
This might not be the exact amount text zooming that you wanted but you can easily configure it as you wish.
Run and test:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20);
font-weight:bold;
font-size: 1.4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
You could try something along the lines of ':placeholder:hover' in order to target the selector which lets you hover over the element and will affect the text within the placeholder. After that you could try to put the 'transition' property within the curly braces - {} - and set the 'font-size' property for the text size you desire. On theory it should adjust the font size to the value you've set whenever you hover your cursor over the placeholder.
Related
I am new to this, so as practice I tried to create a replica of the Netflix registration page.
I am using the flex box model on the webpage.
I am struggling to get the email input and the get started button to align. I have tried changing the button tag to an anchor tag and go the same result. I have tried using margin and padding on the individual elements and that didn't work.
.landing_page_block {
display: block;
width: 40%;
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.landing_page_phrase {
margin: 20px 0 30px 0;
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp-box2 {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.lp_box2 input {
width: 60%;
height: 70px;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}
.get_started_btn {
height: 70px;
margin-left: -3px;
width: 39%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<input type="email" name="email" placeholder="Email address"/>
<button class="get_started_btn">Get Started </button>
</div>
</div>
</div>
The result of my code
I hope that's how you wanted your alignment to be
.landing_page_block {
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.landing_page_phrase {
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp_box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.lp_box2>.input-div{
height: 70px;
width: 62%;
}
.lp_box2>.input-div>input {
height: 70px;
width: 100%;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}
.get_started_btn {
height: 70px;
width: 30%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<div class="input-div">
<input type="email" name="email" placeholder="Email address" />
</div>
<div class="get_started_btn">Get Started </div>
</div>
</div>
</div>
The current output of my pgm(the red nd green circle were edited by me for ur understanding)
The plus symbol inside red circle should be in the place of green circle.
Could you please help me with this..!!
Thanks in Advance,
MY CODE:
.plussymbol{
font-size: 40px;
color: #a4508b;
background-color:transparent;
border-radius: 20px;
border: none;
display: inline-block;
cursor: pointer;
position: absolute;
/*top: 37%;
right: 28%;
*/
padding-top: 15px;
vertical-align: middle;
}
.userip{
width:90%;
height: 65px;
border-radius: 30px;
font-size: 27px;
font-weight: lighter;
font-family: 'Hanalei Fill', cursive;
background-color: #ece7e7;
color: #000;
border: none;
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
padding-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>
<body>
<form>
<input type="text" class="userip" placeholder="Add Today's Task?" autocomplete="on">
<button type="button" class="plussymbol">
<i class="fas fa-plus-square"></i>
</button>
</form>
</body>
</html>
Simply you can do like this.
.plussymbol{
font-size: 40px;
color: #a4508b;
background-color:transparent;
border-radius: 20px;
border: none;
display: inline-block;
cursor: pointer;
margin-left: -60px;
}
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
I am trying to design a pop up that seems like Facebook. Currently I had successfully implement pop up code . Now i am finding difficulty in design CSS of the pop up . Kindly help me to design the pop up same like the attached image.
Current Implementation
Final look Pop Up i need
..............................................................................................................................................................
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
padding: 30px;
max-width: 350px;
width: 100% !important;
background-color: #F7F7F7;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
}
.loginmodal-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
Register - Forgot Password
</div>
</div>
</div>
</div>
your html and css tweaked to achieve your final lookup.
check below
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:8px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:5px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 30px;
font-size: 16px;
width: 100%;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:20px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<h1>Login to Your Account</h1>
</div>
</div>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
RegisterForgot Password
</div>
</div>
</div>
</div>
You can try javascript for this.. in that script function you add styles and check..
Where you are writing code for displaying that modal 'login-modal'??
I am trying to create a simple application using phone gap ,but it seems css is not rendering as expected in the phone gap in IOS for buttons
In browser the button displays as expected ,but in phonegap the style displayed differently.
<!DOCTYPE html>
<html>
<head>
<title>Counter V 1.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/counter.css">
</head>
<body>
<h1><a id="clicks">0</a></h1>
<div class="half">
<input type="submit" value="+" class="increase-button" onClick="increase()">
<input type="submit" value="-" class="decrease-button" onClick="decrease()">
</div>
<div class="half">
<p><input type="submit" value="Reset" class="reset-button" onClick="reset()"></p>
</div>
</body>
</html>
![enter image description here][1]Counter.css
.increase-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 40px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border: 0;
}
.decrease-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #e74c3c;
border: 0;
}
.reset-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
}
I have tried to replicate what you have mentioned here. I was able to get the perfect result. For the same i have attached the image as under. Is this what you are expecting ?
You can download the project at here
EDIT :
Here is the solution
update your css to this
.increase-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 40px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border: 0;
width: 50%;
height: 60px;
color: white;
text-align: center;
-webkit-appearance: none;
border-radius: 0px !important;
}
.decrease-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #e74c3c;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;
}
.reset-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;
}
Reason was uiwebview was adding additional -webkit-appearance:pushbutton and border-radius:20px which i have override in last two lines of css.
Hope this helps