<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> Sign up </button>
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
</style>
I need to move only text within the GitHub button up somewhat without moving other buttons, so ...
padding doesn't work because it moves the button itself leaving the text at the same place (that's not my aim)
position top, bottom does the same thing as padding but moves the text with the button
So I need something between these two arguments (moves only text and not the button)
You could try the following: Put the text inside the button into a <span> tag and then you can simply style it using position: relative; and bottom: 10px;.
Like that:
<!-- replace current line with this one: -->
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button>
<!-- add this to your <style> tag: -->
.GitHubText {
position: relative;
bottom: 5px;
}
Is that what you wanted?
Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Renowned buttons </title>
</head>
<body>
<button class="Uber"> Request now </button>
<button class="Amazon"> Add to Cart </button>
<button class="GitHub"> <span class="GitHubText"> Sign up </span> </button> <!-- line i modified -->
<button class="Bootstrap_One"> Get started </button>
<button class="Bootstrap_Two"> Download </button>
<button class="LinkedIn_One"> Apply on company website </button>
<button class="LinkedIn_Two"> Save </button>
</body>
</html>
<style>
.Uber {
background-color: black;
color: white;
border: none;
height: 35px;
width: 110px;
font-size: 12px;
cursor: pointer;
}
.Amazon {
background-color: rgb(255, 216, 20);
color: black;
border: none;
height: 35px;
width: 160px;
border-radius: 35px;
font-size: 13px;
cursor: pointer;
margin-left: 5px;
}
.GitHub {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 35px;
width: 90px;
border-radius: 5px;
font-size: 15px;
position: relative;
cursor: pointer;
}
/* new lines */
.GitHubText {
position: relative;
bottom: 5px;
}
</style>
Related
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
that creates a centered list of buttons. Unfortunately at the top of the page.
<html>
<head>
<style>
#test {
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
any reason why bottom: 5em does not work ?
as a beginner in css I would appreciate any hint on why I need also to set .mybtn make the css work !
Just place position:relative
<html>
<head>
<style>
#test {
position: relative;
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
I want to hover the icon so it will show the before element, but every time I hover it, the icon disappeared, and when I hover the right-half part of the icon, nothing happened. If I change before to after, it works well.
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
content: '';
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
This will add the black background when hovered over. You can't rest the content as that is utilized to display the icon by FontAwesome.
.container {
background-color: lightgray;
margin: auto;
width: 500px;
height: 200px;
padding: 100px;
}
.icon {
font-size: 50px;
cursor: pointer;
color: red;
}
.icon:hover::before {
background-color: black;
padding: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="container">
<i class="fas fa-exclamation-circle icon"></i>
</div>
Chrome output
Firefox output
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-one {
font-size: 14pt;
font-family: Nexabold;
}
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE <span class="fa fa-arrow-right "></span></a>
</div>
In Firefox, the span is displayed in next line in the button. If I make a change in CSS its affected in Chrome.
See the code below. Hope this will work for you.
#continue-page2 {
border: 2px solid #000;
display: inline-block;
overflow: hidden;
}
#continue-page2 .btn {
float: left;
line-height: 40px;
padding-left: 25px;
text-decoration: none;
color: #000000;
}
#continue-page2 span {
border-left: 2px solid #000;
float: right;
background-color: #831A24;
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
color: #ffffff;
margin-left: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="continue-page2" >
<a class="btn continue-btn heading-two" href="#">CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
In Firefox Quantum 59.0.2 (64-bit)
Following code works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-two {
font-size: 14pt;
font-family: Nexabold;
}
</style>
</head>
<body>
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
</body>
</html>
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 6 years ago.
Improve this question
I created a basket on bootstrap using "Font Awesome".
1) How to write the badge in red ?
2) How to put the badge on the cart ?
<a href="/cart">
<i class="fa fa-shopping-cart fa-3x"></i>
<span class="badge">[quantity]</span>
<span>[commerce_order_total]</span>
</a>
Are You Looking for this
https://plnkr.co/edit/tL6GLun9iG5R9ifaaG74?p=preview
I just copy pasted a piece of code what I used already, Make Your trimming and adjust for your needs
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<a href="#" class="btn btn-default btn-lg">
<i class="fa fa-shopping-cart fa-3x"></i>
<span class="bs-badge badge-absolute float-right badge-red">87</span>
</a>
</body>
</html>
CSS
/* Styles go here */
a {
outline: 0;
}
.btn {
border-radius: 3px;
font-weight: 400;
position: relative;
display: inline-block;
padding: 0 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
white-space: nowrap;
border-width: 1px;
border-style: solid;
border-color: transparent;
background-image: none;
}
.fa {
color: green;
}
.btn-lg {
font-size: 18px;
padding: 0 16px;
line-height: 44px;
min-width: 56px;
height: 46px;
}
.bs-badge.badge-absolute.float-right {
right: -4px;
left: auto;
}
.bs-badge.badge-absolute {
position: absolute;
z-index: 5;
top: -6px;
left: -15px;
}
.bs-badge {
font-size: 11px;
font-weight: 700;
line-height: 19px;
display: inline-block;
min-width: 20px;
height: 20px;
padding: 0 4px 0 5px;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
color: #fff;
border-radius: 10px;
}
.badge-red {
background: red;
border-color: #7a3ecc;
}
}