I'm making a basketball website and I need to make some customized icons/buttons for links to different pages. I want to create a customized button that has a round picture with a picture below. Below it, I need text.
I don't know how to get the text and the image in the same icon.
Thanks.
Here's an example of what I want.
https://i.stack.imgur.com/5xgEo.png
you can do this by using HTML and CSS
<div class="container">
<img src="example.jpg" alt="img miss">
<div class="centered">Centered</div>
</div>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use anchor tag.
For making image and text a link
<a href ="link" >
<div class="class_name" >
<img src ="image_path" >
<p> text </p>
</div>
</a>
And for making text as a link
<a href ="link" > text </a>
When on use anchor tag <a> anything like image, text place between <a> & </a>, will be the link, which onclicking directs us to link mention in href
You can also try like this:
* {
boz-sizing: border-box;
}
body {
font-family: sans-serif;
background: #333;
padding: 20px;
}
.button {
background: #fff;
border-radius: 6px;
display: inline-block;
padding: 10px;
text-align: center;
max-width: 150px;
text-decoration: none;
}
.button figure {
margin: 0 0 15px;
}
.button figure img {
border-radius: 100%;
}
.button .text {
font-weight: bold;
text-transform: uppercase;
color: #1d368a;
margin: 0 0 15px;
font-size: 16px;
}
<a href="#" class="button">
<figure><img src="http://via.placeholder.com/100x100"></figure>
<div class="text">
Start Playing Basketball
</div>
</a>
You can use an image to it, or create a link..
see an example:
<a href=“test.html”>
<div>
<img src=“img.jpg” alt=“test”/>
<p>Link Test</p>
</div>
</a>
For valid HTML you have to pay attention to which elements you use. If you use an anchor tag, you can only use inline elements within it. But with CSS you can rephrase everything.
HTML:
<a class="btn">
<span class="btn-img"></span>
<span class="btn-text">Start playing basketball</span>
</a>
CSS:
.btn {
display:block;
padding:10px;
background-color:white;
border-radius:5px;
position:relative;
width:200px;
text-align:center;
}
.btn-img {
position:relative;
width:175px;
height:175px;
border-radius:50%;
display:block;
margin:0 auto;
background-color:red;
background-image:url(YOUR IMAGE);
}
.btn-text {
text-transform:uppercase;
font-size:12px;
}
Please check the link
https://jsfiddle.net/9wjcya06/
<a href ="#" class="btn-link" >
<div class="button" >
<img src ="https://i.pinimg.com/originals/40/97/c4/4097c40d4f2e1bbcc9044be03b5f730e.jpg" alt="img" >
<span> START PLAYING BASKET BALL </span>
</div>
</a>
see code bellow:
.img{
border-radius: 50%;
height: 120px;
width: 120px;
padding: 11px;
padding-bottom:0px;
}
.txt{
font-family: Georgia, serif;
text-align: center;
width: 85px;
color: blue;
padding-left: 34px;
font-size: 14px;
}
.btn{
background-color: white;
}
<button class="btn">
<img class="img" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
<p class="txt">strat playing basketball</p>
</button>
step 1.Add an icon library, such as font awesome.
step 2.append icons to HTML buttons
<!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">
<style>
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>
</body>
</html>
Related
I don't know how to describe this problem. I'm using three styling frameworks Bootstrap, Semantic, and Materialize CSS. I've created an unordered list after that there is a button when I use the br tag to separate them separation works but the gap doesn't fill with the body background color so I used margin but still, the gap is not filling with body color.
You can see this problem in this
HTML code
<section>
<div class="container dashboard ">
<div class="row">
<aside class="col-sm-3">
<ul class="list-group text-center">
<a class="list-group-item active" href="#">Dashboard</a>
<a class="list-group-item" href="#">All Posts</a>
<a class="list-group-item" href="#">Create/Edit Posts</a>
</ul>
<a class="btn btn-light btn-block" href="#"> <i class="fa fa-power-off"></i> <span class="text">Log out</span> </a>
</aside>
</div>
</div>
</section>
CSS
.dashboard{
margin-top: 100px;
margin-bottom: 100px;
padding: 30px 0px;
}
.dashboard .col-sm-3{
border-bottom: none;
border-radius: 5px;
height: fit-content;
padding-left: 0;
padding-right: 0;
background: #fff;
}
.dashboard .col-sm-3 ul a{
text-decoration: none;
font-weight: 500;
}
.dashboard .col-sm-3 .btn {
margin-top: 50px;
}
.btn-light {
background-color: #fff;
border-color: #e4e4e4;
text-align: center;
}
.btn-light span{
text-transform: none;
font-weight: 500;
}
You can check this question this thing will help you link
Actually, this question helps me too I've also faced a similar situation.
I will make this more simple I think this work you can try this
br {
content: "A" !important;
background: #fafafa !important;
display: block !important;
width: 100% !important;
height: 30px !important;
}
I am trying to achieve the following: I am using bootstrap, standard btn class.
So far I the background image is kind of in the correct position, but it gets cut off. I've tried overflow: visible; etc...
.btn {
background: url('../images/button.svg') no-repeat;
background-repeat: no-repeat;
background-position: left;
padding-left: 80px;
}
<button class="btn btn-default btn-lg">GET A FREE QUOTE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
Thanks for any help
Hello you can use this code below, I have uploaded your png file to mediafire. I also removed the background of your image. Here is the link: http://www.mediafire.com/view/ddv9ce54d08488m/Ky5ME_burned.png
<!DOCTYPE html>
<html>
<head>
<a href="http://google.com">
<input type="image" src="Ky5ME_burned.png" alt="Submit" width="660" height="174">
</a>
</head>
</html>
.btn_button, .btn_button:hover, .btn_button:focus{
background: orange;
color: blue;
margin-left: -10px;
margin-top: 3px;
width: 150px;
outline: none;
}
.round_div{
display: flex;
}
.round2:before{
content: "\25cf";
font-size: 14px;
padding: 0px 3px;
border: 4px solid #000;
border-radius: 50%;
}
.round1{
border: 10px solid orange;
border-radius: 50%;
}
.glyphicon_right_arrow{
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="col-xs-12 form-group"></div>
<div class="col-xs-12">
<div class="round_div">
<div class="">
<div class="round">
<div class="round1">
<span class="round2"></span>
</div>
</div>
</div>
<div class="">
<button class="btn btn_button" value="">MORE ABOUT US
<span class="glyphicon glyphicon-chevron-right glyphicon_right_arrow"></span></button>
</div>
</div>
</div>
I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.
(The title might sound stupid but I don't know how to put it more sophisticated.)
As you can see in the follwing screenshots, I have 3 stacked divs.
<div class="col-xs-3">
<div class="center-horizontal-inline">
<a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
</div>
<div class="score">
115
<span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>
The one in the middle contains the number (115). The other two the vote-arrows. For the one containing the number, I want to add a "badge" (in bootstrap context) right next to the number, let's say to the right. You can see my attempt shining through the colored overlay.
The goal is to leave the number centered respectively to the arrow-icons, while placing the badge with an offset (or "right next to") respectively to the number.
My attempt was to set a float: right; for the badge, but as you can see, the number has an offset now. When I try position: absolute; on the badge, there is no offset (as wanted), but I can't get the badge right next to the number, I can only attach it to the right border because I don't have the number as positioning-reference anymore.
Hope my explanation was clear enough. I also didn't know how to search for that problem...
EDIT 1:
As I want it to look like (positioning-wise):
Here we go, using relative and absolute positions together:
DEMO: http://jsfiddle.net/1qbo7uwn/
HTML
<div class="score">
<span class="score-wrap">
<span class="score-main">123</span>
<span class="score-diff">8</span>
</span>
</div>
CSS
.score {
width: 80px;
border: 2px solid blue;
padding: 10px 0;
text-align: center;
}
.score-wrap {
display: inline-block;
position: relative;
}
.score-main {
border: 2px solid green;
}
.score-diff {
position: absolute;
border: 2px solid red;
left: 100%;
top: -2px;
}
Added some span tags in the HTML.
EDIT: vertical align of everything, by setting line height.
http://jsfiddle.net/1qbo7uwn/1/
As you said you are okay with HTML modification. Here's my attempt:
Demo Fiddle
HTML
<div class="wrap">
<div class="vote up">
<i class="fa fa-angle-up"></i>
</div>
<div class="stat">
<span class="score">115
<span class="badge">+5</span>
</span>
</div>
<div class="vote inactive">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS
.wrap{
margin: 100px;
text-align:center;
}
.vote{
font-size:36px;
}
.up{
color:green;
}
.down{
color:red;
}
.inactive{
color:gray;
}
.score{
position: relative;
display:block;
padding: 5px 0;
}
.badge{
background: #eee;
padding:5px 10px;
border-radius: 30px;
position: absolute;
top:0;
margin-left:10px;
}
Try
Demo: http://jsfiddle.net/tamilcselvan/rjv1xxo2/1/
.center-horizontal-inline {
font-size: 2em;
text-align: center;
}
.score {
text-align: center;
}
.score:after {
content:attr(data-badge);
position: absolute;
margin-left: .4em;
font-size: x-small;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #777;
border-radius: 10px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
<div class="center-horizontal-inline vote"> <i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="score" data-badge="+5">115</div>
<div class="center-horizontal-inline"> <i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
Got two buttons that I want to have an icon and text in.
<a href="#">
<div class="button">
<i class="flaticon-tools6"></i>
<p>View all services</p>
</div>
</a>
<a href="#">
<div class="button">
<i class="flaticon-phone16"></i>
<p>Get a quote</p>
</div>
</a>
Here's the CSS
.button .flaticon-phone16,
.button .flaticon-tools6 {
font-size: 30px;
line-height:42px;
}
.button p {
display: inline;
line-height:42px;
margin: 0px;
}
.button {
font-size:15px;
font-weight:bold;
font-style:normal;
line-height: 42px;
height:42px;
width:100%;
text-decoration:none;
text-align:center;
padding: 0;
}
I removed the styling stuff from the button class. Currently they are not vertically centered, as visible in this screenshot.
Does anyone have any ideas?
remove the other line-hight and only add line-height with a display block on
.button p {display: block; margin: 0px; line-height: 42px; }
You can use display: table-cell combine with vertical-align: middle:
a {
width: 100%;
display: table;
}
.button .flaticon-phone16, .button .flaticon-tools6 {
font-size: 30px;
}
.button p {
margin: 0px;
}
.button {
display: table-cell;
font-size:15px;
font-weight:bold;
font-style:normal;
line-height: 42px;
height:42px;
width:100%;
text-decoration:none;
text-align:center;
padding: 0;
}
<a href="#">
<div class="button">
<i class="flaticon-tools6"></i>
<p>View all services</p>
</div>
</a>
<a href="#">
<div class="button">
<i class="flaticon-phone16"></i>
<p>Get a quote</p>
</div>
</a>