This question already has answers here:
Embed image in a <button> element
(11 answers)
Closed 10 months ago.
How would i add an image on a button? Right now i am trying to create a banner like thing for a big button but the image doesn't seem to get inside the button as shown here:
I want the image to be inside the button and not separate each other like that
Here is the HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Saharsh | Projects</title>
<link rel='stylesheet' href='/Styles/projects.css'>
<link rel='stylesheet' href='../style.css'>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<link rel='icon' type='image/x-icon' href='/Images/Branding/pfp.png'>
</head>
<body class='container'>
<div id='home'>
<nav class='navbar'>
<ul>
<li><a href='../index.html'>Home</a></li>
<li><a href='#aboutMe'>About me</a></li>
<li><a href='#moreSoon'>Contact me</a></li>
</ul>
</nav>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<h1 class='main'>My Projects</h1>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<a href='#aboutMe'><img src='../Images/Projects/Modular-FPS.png' class='banner'><button class='project_button'>Modular FPS Template</button></img></a>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<div>
<h1 id='moreSoon' style='text-align: center;'>
<a href='https://github.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/github.svg'></span></a>
<a href='https://discord.gg/bkP2P5uuH2' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/discord.svg'></span></a>
<a href='https://youtube.com/SaharshDev' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/youtube.svg'></span></a>
<a href='https://twitter.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/twitter.svg'></span></a>
</h1>
</div>
<br class='us'>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='Scripts/scrollSmooth.js'> </script>
<!-- <script src='Scripts/i_am_a.js'> </script> -->
</body>
</html>
And here is the CSS code:
#font-face {
font-family: 'mainFont';
src: url("../Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
#font-face {
font-family: 'descFont';
src: url("../Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}
.project_button {
font-family: 'descFont';
font-weight: normal;
font-style: normal;
background-color: #181818;
border: none;
color: white;
/* padding: 20px; */
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 6px;
border-radius: 10px;
cursor: pointer;
width: 450px;
height: 250px;
box-shadow: 0px 16px 16px rgba(0,0,0,0.14);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.project_button:hover {
transform: scale(1.03);
}
.banner {
width: 350px;
height: 190px;
}
Thanks in Advance!
You can do this:
<button class='project_button'>Modular FPS Template <img src='../Images/Projects/Modular-FPS.png' /></button>
Move your image inside the button.
Please try this. Thanks.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<button><img src="image.jpg" alt="No Image" width="50" height="30"></button>
</body>
</html>
You can try adding the onClick event to the img tag:
<img onClick="window.open("https://example.com")" />
You should be able to do it using a form and using an input with the "image" type like this:
<input type="image" id="myimage" src="[...]" />
Related
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part is not workink, I does not shown on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
Design in XD :
Code Image:
Output:
Try a.logo2:link, a:logo2:visited as a selector for that CSS rule. That should be more specific than the browser default a:link and a:visited and overrule them.
OK, so I've tried using a live HTML editor, and it worked in there, but it is not working when I open my index.html file. Please show me what I am doing wrong. Here is my HTML code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap">
<!-- Permanent Marker Font -->
<title>Educational Things</title>
</head>
<body>
<!-- Navigation -->
<div class="container" id="nav-bar">
<!-- RGH Logo-->
<div class="container nav-bar-items-left">
RGH
</div>
<!-- Navigation Bar Items -->
<div class="container nav-bar-items-right">
Item1
Item2
Item3
</div>
</div>
<!-- Ads -->
<div class="container" id="ads">
<div class="container">
<a href="#" class="left-side-ad">
<img src="#" class="left-side-ad" alt="left-side-ad">
</a>
</div>
<div class="container">
<a href="#" class="right-side-ad">
<img src="#" class="right-side-ad" alt="right-side-ad">
</a>
</div>
</div>
<!-- Main Content -->
<div class="container" id="main-content">
<!-- Videos -->
<div class="container" id="videos">
<div class="container" id="video01">
<a href="#" class="video01">
<img src="#" alt="video01" class="video01">
<br>
<p>video01_title</p>
</a>
</div>
</div>
</div>
</body>
</html>
Here is my CSS code
* {
margin: 0;
padding: 0;
}
#nav-bar {
background-color: #DF29CE;
overflow: hidden;
font-family: 'Permanent Marker', 'cursive';
top: 0;
left: 0;
right: 0;
height: 35px;
}
.nav-bar-items-left {
float: left;
font-size: 36;
padding: 10px;
}
.nav-bar-items-right {
float: right;
font-size: 28;
padding: 10px;
}
As you can see, my navigation bar items are supposed to be enlarged, but are staying the same. Am I overlooking something? Does anyone else have this problem?
You don't have a unit on your font size (eg 36px or 36pt), and while the live editor may have been okay with that, most browsers won't change the size of your text without one.
.nav-bar-items-left {
float: left;
font-size: 36px; // add unit px (pixels)
padding: 10px;
}
.nav-bar-items-left {
float: left;
font-size: 36px; // add here too.
padding: 10px;
}
<html>
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com">
<!-- To integrate Google Sign-in -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
It is not displayed.
What's wrong with this HTML snippet? Do I have to do something else to display the Google sign-in button?
If you use Bootstrap v4, you can get a nice-looking button like the one below with something like:
<div class="row">
<div class="col-md-3">
<a class="btn btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Login with Google
</a>
</div>
</div>
<!-- Minified CSS and JS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
This is an elegant solution I came up with using materializecss.
Code
<div class="col s12 m6 offset-m3 center-align">
<a class="oauth-container btn darken-4 white black-text" href="/users/google-oauth/" style="text-transform:none">
<div class="left">
<img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</div>
Login with Google
</a>
</div>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
CHECK: https://developers.google.com/identity/sign-in/web/build-button
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
In a single line (result):
<button type="button" style="background:#4285f4; color:white; border:none; width:110px; height:40px; border-radius:3%;"><img src="https://www.iconfinder.com/data/icons/social-media-2210/24/Google-512.png" style="width:30px; background:white; border-radius:50%;" alt=""><b style="top: -10px; left: 5px; position: relative">Google</b></button>
If you happen to use Foundation:
<div>
<a class="hollow button primary" href="#">
<img width="15px" style="margin-bottom:3px; margin-right:5px" alt="Google login" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Sign in with Google
</a>
</div>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
onClick={handleGoogleLogin}
>
<img
width="20px"
style={{ marginBottom: "3px", marginRight: "5px" }}
alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"
/>
Login with Google
</Button>
enter image description here
Can you help me get some space between <h1> and <ul>?
h1
{
margin:0;
padding:0;
float:left;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
<h1> has already margin & dispaly block property why your are overriding that. Remove your h1 css.
h1 has default margin-top: 0.67em; margin-bottom: 0.67em; so it will automatically align. See the snippet output after removing h1 css
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
If you want horizontal spacing use padding-right for h1.
h1
{
margin:0;
padding:0;
float:left;
padding-right:30px;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
Try adding margin-bottom to your h1 class in the css file.
f.e.
margin-bottom: 10px;
I have a html document in which a menu I've made using uls is showing little dashes below the line. This is my html source code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, Consult, Consultation, Netconsultation">
<meta name="description" content="Website of Connet Consultancy Services.">
<meta name="author" content="Connet development team">
<title> Connet. Connect. Through the internet. </title>
<link rel="stylesheet" href="/page_files/css/Main.Style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script src="/page_files/js/Default.Interactivity.js"> </script>
<script src="/page_files/js/Default.Processing.js"> </script>
<noscript title="Could not connect to script">
We can't get our scripts. Reloading the page might fix it.
</noscript>
</head>
<body>
<div class="Wrapper">
<nav>
<ul class="NavList">
<li>
<a onclick="location.reload();">
<img src="/page_files/media/home-icon.png" alt="Home"/>
</a>
</li>
<li>
<a href="/Login.html">
<img src="/page_files/media/user-icon.png" alt="Login" />
</a>
</li>
<li>
<a href="/Conroot.html">
<img src="/page_files/media/connect-icon.png" alt="Enter consultation" />
</a>
</li>
<li>
<a href="/Blog.html">
<img src="/page_files/media/blog-icon.png" alt="Blog" />
</a>
</li>
<li>
<a href="/Careers.html">
<img src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a href="/Contact.html">
<img src="/page_files/media/contact-icon.png" alt="Contact us" />
</a>
</li>
<li>
<img src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input type="text" id="SearchBox" placeholder="Search...">
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSect">
</section>
<section class="MidSect">
</section>
<section id="NewSect">
</section>
<section class="LogSect">
</section>
</div>
</div>
</body>
</html>
This is my css:
/* CSS DOCUMENT */
body {
background-color: #fff;
color: #0094ff;
font-family: 'Segoe UI Light', 'Tahoma', Geneva, Verdana, sans-serif;
font-size: 24px;
font-weight: 100;
text-decoration: none;
}
ul.NavList {
list-style-type: none;
text-decoration: none;
text-align: center;
padding: 20px 20px 0 0;
}
ul.NavList li {
display: inline;
text-decoration: none;
}
I'm using Microsoft Edge, and these are the dashes I'm talking about:
It works fine in IE11:
But not in Chrome:
I can't get any clear idea bout what these "dashes" are. Help????
(Thanks in advance.)
They are the remnants of links.
Try something like
ul.NavList li a {
text-decoration: none;
}