I want to put the fa-circle to the top corner. Basically, what I am looking for, is positioning the fa-circle to the top right (only for active buttons).
.btn1 {
background-color: grey;
border: none;
color: white;
padding: 10px 12px;
font-size: 14px;
cursor: pointer;
}
.fa.fa-circle {
color: darkorange;
font-size: 0.25em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn1"><i class="fa fa-circle pull-right"></i>Active</button>
I have made some changes to Penny Liu's Answer fom above. but still I am unsure whether it will work in tab.
.btn {
position: relative;
display: inline-block;
padding: 10px 12px;
background-color: grey;
color: white;
border: none;
font-size: 1.4em;
cursor: pointer;
}
.active:before {
position: absolute;
font-family: FontAwesome;
content: "\f111";
color: darkorange;
font-size: .35em;
top: 0.35em;
right: 0.25em;
/*z-index: 1;*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn active">Active</button>
<button class="btn">Button</button>
To make the icon show only for the active button, you would have to hide the icon as default, then pass a class to the button to make the icon display when needed to be active with some javascript or jquery.
Code below shows and active class added the button, the CSS has been updated to hide the icon till the active class has been appended to the button.
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Add icon library -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.btn1 {
/* background-color:#f5e0f9;*/
background-color: grey;
border: none;
color: white;
padding: 10px 12px;
font-size: 14px;
cursor: pointer;
}
.btn1 .fa {
display: none;
}
.btn1.active .fa.fa.fa-circle {
display: block;
}
.fa.fa-circle {
color: darkorange;
font-size: 0.25em;
}
</style>
</head>
<body>
<button class="btn1 active">
<i class="fa fa-circle pull-right"></i>Active
</button>
</body>
</html>
You could set btn1 to position: relative
And then for the icon, do
position: absolute;
right: 0;
top: 0;
ie -->
.btn1 {
background-color: grey;
border: none;
color: white;
padding: 10px 12px;
font-size: 14px;
cursor: pointer;
position: relative;
}
.fa.fa-circle{
color:darkorange;
font-size: 0.25em;
position: absolute;
top: 0;
right: 0;
margin: 5px 5px 0 0;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button class="btn1"><i class="fa fa-circle pull-right"></i>Active</button>
</body>
I guess this is what you looking for:
.btn {
position: relative;
display: inline-block;
padding: 10px 12px;
background-color: grey;
color: white;
border: none;
font-size: 1.4em;
cursor: pointer;
}
.active::before {
position: absolute;
font-family: FontAwesome;
content: "\f111";
color: darkorange;
font-size: .7em;
top: 0em;
right: 0em;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn active">Active</button>
<button class="btn">Button</button>
Related
I am doing a project where I need bootstrap. It works perfectly but when I try to add a dropdown menu it isn't working. Also, I am making the dropdown menu from here. Here is html code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="menu">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
And here is the css code:
.menu {
overflow: hidden;
background-color: transparent;
font-family: Arial;
}
.menu a {
float: left;
font-size: 25px;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 25px;
border: none;
color: white;
padding: 15px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn {
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
When I delete the <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> the dropdown works perfectly but when I add it it doesn't work.
Please reply.
The answer to this problem is clear! If you read bootstrap docs about dropdowns, you would notice that dropdown class is one of the classes that are used by bootstrap. So to solve the issue you need to change your class name to something else like dropdownME class, like the code below:
.menu {
overflow: hidden;
background-color: #000;
font-family: Arial;
}
.menu a {
float: left;
font-size: 25px;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.dropdownME {
float: left;
overflow: hidden;
}
.dropdownME .dropbtn {
font-size: 25px;
border: none;
color: white;
padding: 15px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdownME:hover .dropbtn {
color:white;
text-decoration:underline;
text-decoration-color:white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdownME:hover .dropdown-content {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
Home
News
<div class="dropdownME">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I also change the background-color of .menu for better showing.
im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc
Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. I tried some edits but isn´t do with dropdown. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
tyle>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
add hover css to display the drop-down content
.dropbtn:hover ~ .dropdown-content {display: block;}
Looking for a split button dropdown field without any bootstrap package, I referred a lot but I didn't get any source.
Kindly refer the code below
.btn {
background-color: #2196F3;
color: white;
padding: 16px;
font-size: 16px;
border: none;
outline: none;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {
display: block;
}
.btn:hover, .dropdown:hover .btn {
background-color: #0b7dda;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Split Button Dropdowns</h2>
<p>Move the mouse over the arrow icon to open the dropdown menu.</p>
<button class="btn">Button</button>
<div class="dropdown">
<button class="btn" style="border-left:1px solid #0d8bf2">
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
I want to tick mark on my button on the right corner. I set the input value to it gives me a buttoner text with tick mark I wanted to it should be placed on the right corner.
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
}
<input type="button" class="buttoner" value="buttoner✓"/></input>
i want like this:
.my-btn {
position: relative;
display: inline-block;
}
.buttoner {
background-color: #66bb6a;
border: none;
cursor: pointer;
height: 48px;
border-radius: 3px;
width: 120px;
text-align: center;
color: white;
line-height: 48px;
font-size: 14px;
font-weight: bold;
}
.my-btn .fa-check {
position: absolute;
top: 5px;
right: 10px;
color: #fff;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="my-btn">
<input type="button" class="buttoner" value="Button"/>
<i class="fa fa-check"></i> </div>
</body>
</html>
try like this
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.buttoner{
background-color: #4CAF50;
border: none;
cursor: pointer;
padding:12px 30px;
display:inline-block;
border-radius: 5px;
color:#fff;
}
.tick{
display:inline-block;
position:relative;
}
.tick:after{
content: '';
position:absolute;
right:11px;
top:8px;
display: block;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<span class="tick"> <input type="button" class="buttoner" value="button"/></input></span>
</body>
</html>
Check this i added..
<!DOCTYPE html>
<html>
<head>
<title>Button with tick mark</title>
<style type="text/css">
.button_box{
background-color: #4CAF50;
border: none;
cursor: pointer;
height: 48px;
border-radius: 5px;
width: 10%;
position: relative;
}
.buttoner {
background-color: transparent;
border: none;
display: block;
width: 100%;
height: 100%;
}
.button_box span {
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="button_box">
<input type="button" class="buttoner" value="buttoner"/>
<span>✓</span>
</div>
</body>
</html>