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;
}
Related
I am adding the following code to my CSS file for my parent div .outertContainer but the border-radius is only affecting the top two corners and not the bottom two corners. I cannot seem to figure it out. Everything else seems to work fine.
*{
background-color: white;
margin: 0;
padding: 0;
}
.outerContainer{
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
The following is the html code:
<div className="LoginPage">
<div className="outerContainer">
<form name="form">
<div className="emailLabelInput">
<input type="text" className="login-form-control" name="email" placeholder="Email address"/>
</div>
<div className="passwordLabelInput">
<input type="password" className="login-form-control" name="password" placeholder="Password"/>
</div>
<div className="form-group">
<button className="submit-btn">Log in</button>
</div>
</form>
</div>
</div>
Your problem is you have * { background: white; } which makes the background of all the elements white. Since the form is just as large as the outerContainer and does NOT have a border-radius, it effectively covers up the border-radius applied to the outerContainer. So you have two options to fix the problem:
1 — Remove * { background: white; }. This works for the most part except that the two inputs are still positioned in the top left corner of the outerContainer and of course still covering that corner. If you have those positioned a little differently, this would work.
2 — Add padding: 10px to the outerContainer. This will give the outerContainer a little bit of 'breathing room' and keep the form from covering the corners. See the snippet below.
*{
background:white;
margin: 0;
padding: 0;
}
.LoginPage{
height:100vh;
width:100vw;
}
.outerContainer{
padding:10px; /* Added to show radius */
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
#error-message{
border: 1px solid #ff7f50;
margin-top: 10px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border-radius: 4px;
line-height: normal;
font-size: 15px;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
<div class="LoginPage">
<div class="outerContainer">
<form name="form">
<div class="emailLabelInput">
<input type="text" class="login-form-control" name="email" placeholder="Email address"/>
</div>
<div class="passwordLabelInput">
<input type="password" class="login-form-control" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<button class="submit-btn">Log In</button>
</div>
</form>
</div>
</div>
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.
I am a beginner at CSS's programming and have a question about text positioning. I have to design download button in CSS without symbol font or images in it. I've done that, but text doesn't want to fit inside box (picture 1).
This is my CSS code:
#download{
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p{
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color:white;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad{
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat{
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>
</div>
I would be glad, if anyone told me, what I did wrong. Thank you very much! :)
Just remove the margin from your <p> element:
#download p {
margin: 0;
}
(Side question: what is padding-bottom: 300px doing in there? Is that really necessary?)
Here's your markup with the added CSS rule:
#download {
background-color: rgb(0, 230, 0);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
width: 235px;
height: 65px;
}
#download p {
font-family: 'Roboto Slab', serif;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
font-size: 30px;
color: white;
margin: 0;
padding-left: 50px;
padding-bottom: 300px;
}
#ikonad {
border-radius: 150px;
border-color: rgb(0, 179, 0);
border-width: 3px;
border-style: solid;
background-color: rgb(242, 242, 242);
height: 58px;
width: 58px;
padding-left: 1px;
padding-top: 1px;
}
.kvadrat {
width: 15px;
height: 20px;
background: rgb(0, 179, 0);
margin-left: 20px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding-top: 8px;
}
#trikotnik {
padding-top: 10px;
margin-left: 12.5px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid rgb(0, 179, 0);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<div id="download">
<div id="ikonad">
<div class="kvadrat">
<p>Download</p>
</div>
<div id="trikotnik"></div>
</div>
</div>
.hexagon span {
color: #0f0f0f;
font-size: 16px;
line-height: 0px;
}
.hexagon {
font-size: 40px;
/*text-align: center;*/
line-height: 45px;
}
.hexagon,
.hexagon:hover {
color: #fff;
text-decoration: none;
}
.hexagon.red,
.hexagon.red:after,
.hexagon.red:before {
background: #ed8990;
}
.hexagon.aqua,
.hexagon.aqua:after,
.hexagon.aqua:before {
background: #8dd7d8;
}
.hexagon.orange,
.hexagon.orange:after,
.hexagon.orange:before {
background: #fd8a78;
}
.hexagon {
width: 80px;
height: 45px;
position: relative;
float: left;
margin: 50px 25px;
background: #48d1b2;
border-radius: 4px;
z-index: 1;
text-align: center;
box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.05), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
}
.hexagon:before {
content: '';
position: absolute;
top: -22px;
left: 16px;
width: 48px;
height: 48px;
background: #b5adac;
transform: rotate(-54deg) skewY(23deg);
border-radius: 6px;
z-index: -1;
box-shadow: inset -1px 1px 0px 0px rgba(0, 0, 0, 0.05);
}
.hexagon:after {
content: '';
position: absolute;
bottom: -22px;
left: 16px;
width: 48px;
height: 48px;
background: #b5adac;
transform: rotate(-54deg) skewY(23deg);
border-radius: 6px;
z-index: -1;
box-shadow: inset 1px -1px 0px 0px rgba(0, 0, 0, 0.05);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="menu">
<a class="hexagon red">
<i class="fa fa-list"></i>
<br/>
<span>Some menu name</span>
</a>
<a class="hexagon aqua">
<i class="fa fa-file-o"></i>
<br/>
<span>Foo</span>
</a>
<a class="hexagon orange">
<i class="fa fa-cog"></i>
<br/>
<span>Barbazzzzz </span>
</a>
</div>
</body>
</html>
I have some hexagon shaped links. I try to add the name of the menu, but there are some problems.
There should be a bigger space between the hexagon's bottom and the name of the menu. margin-top wont help on the inline span.
If the name is too long, the spacing is too big between the lines. Even if I set it to line-height: 0px
http://jsbin.com/wohuyubiso/3/edit?css,output
If I understand your problem you just need to make the name display: block.
So, you need to add something like:
.hexagon span {
display: block;
margin-top: 30px;
line-height: 20px;
}
http://jsbin.com/wojuhoravo/edit?html,css,output
Of course it would be nice to use div with proper class name instead of span in this case.
just add this change that will be work for you
.hexagon span{
display: block;
top: 25px;
line-height: 20px;
position: relative;
}
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