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>
Related
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/
This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}
I'm trying to have an input appear when a button is clicked but then I want a background all the way around both the button and the input. Currently, my markup renders like the following:
So when the click reason, I basically want the yellow (alert-warning) background around the Reason button and the input. My markup looks like this:
div.saveReason {
display: inline;
background-color: #fff3cd;
border: solid 1px #ffeeba;
border-bottom-width: 0;
padding-bottom: 20px;
z-index: 1;
}
div.saveReasonDetail {
z-index: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div>
<a class="btn btn-primary mr-2 SaveEdits">Save</a>
<div class="saveReason">Reason</div>
<a class="btn btn-link CancelEdits">Cancel</a>
<div class="alert alert-warning mt-2 saveReasonDetail">
<div class="form-group viReason">
<div class="validator-container">
<textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
</div>
</div>
</div>
</div>
My problems are:
1) I don't want the border underneath the button...I want the border to only be no the 'outside' of the yellow.
2) I want the yellow background to extend just a bit outside of the reason button (without affecting the margins between the buttons already in place).
Is this possible?
Update: I got valid answers from Kareem Dabbeet and Chase Ingebritson. Kareem was first marked as answer, but not being an expert in HTML, I'm thinking the comment Chase made about a 'same container' seems to be important. Make sure to review his answer as well.
For the first question:
Just edit div.saveReasonDetail position and make it inherit:
div.saveReasonDetail {
position: inherit;
}
now edit border-bottom color for the saveReason to make it the same as 'saveReasonDetail' bg-color:
border-bottom-color: #FFF3CD
For the second question: To simiulate a m-2 between each button, you need to change margin-right on the save button to m-1 and add padding left/right with the same value for the reason button like this:
.SaveEdits {
margin-right: 0 !important;
}
div.saveReason {
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 10px;
}
I colored "cancel" link to insure that margins are alright
Here is the final result
div.main {
padding-top: 20px;
}
div.saveReason {
display: inline;
background-color: #fff3cd;
border: solid 1px #ffeeba;
border-bottom-color: #fff3cd;
padding-bottom: 20px;
padding-top: 10px;
padding-left: 0.25rem;
padding-right: 0.25rem;
z-index: 1;
}
div.saveReasonDetail {
position: inherit;
}
.SaveEdits {
margin-right: 0 !important
}
.CancelEdits {
background-color: purple !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
<a class="btn btn-primary mr-1 SaveEdits">Save</a>
<div class="saveReason">Reason</div>
<a class="btn btn-link ml-1 CancelEdits">Cancel</a>
<div class="alert alert-warning mt-2 saveReasonDetail">
<div class="form-group viReason">
<div class="validator-container">
<textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
</div>
</div>
</div>
</div>
In this case, you would probably want to put both the button element and the textfield element in the same container. Once they share a common parent, you can set the textfield's position to be absolute and it won't affect the position of the other buttons.
div.main { padding-top: 20px; }
div.saveReason {
background-color: #fff3cd;
border: solid 1px #ffeeba;
border-bottom-width: 0;
z-index: 1;
display: inline-block;
padding: 10px;
}
.saveReason > .btn {
margin-right: 0 !important;
}
div.saveReasonDetail {
z-index: -1;
position: absolute;
width: 100%;
left: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="main">
<a class="btn btn-primary mr-2 SaveEdits">Save</a>
<div class="saveReason">
Reason
<div class="alert alert-warning mt-2 saveReasonDetail">
<div class="form-group viReason">
<div class="validator-container">
<textarea name="iReason " rows="4 " id="iReason" class="form-control iReason"></textarea>
</div>
</div>
</div>
</div>
<a class="btn btn-link CancelEdits">Cancel</a>
</div>
This is your solution
div.main {
padding-top: 20px;
}
div.saveReason {
display: inline;
background-color: #fff3cd;
border: solid 1px #ffeeba;
border-bottom-color: #fff3cd;
padding-bottom: 20px;
padding-top: 6px;
z-index: 1;
}
div.saveReasonDetail {
position: inherit;
}
.SaveEdits {
margin-right: 0 !important
}
.CancelEdits {
background-color: purple !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
<a class="btn btn-primary mr-1 SaveEdits">Save</a>
<div class="saveReason">Reason</div>
<a class="btn btn-link ml-1 CancelEdits">Cancel</a>
<div class="alert alert-warning mt-2 saveReasonDetail">
<div class="form-group viReason">
<div class="validator-container">
<textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
</div>
</div>
</div>
</div>
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i created a round border button that shows some numbers in it.
I tried to center the numbers in the different buttons, but text-align and vertical-align could not help to center the number in every dimension (vertical and horizontal).
Can you please help me to achieve that goal?
here is my code:
http://jsbin.com/nefuhukuja/edit?html,css,output
Thank you
EDIT:
I also got problems to do this with the text below the buttons
Here is CSS
.minus
{
text-align:center;
}
.countdown-overlay .col-lg-2 p{
color: #cfd8dc;
font-size: 20px;
margin-top: 10px;
}
.btn span{
color: #cfd8dc;
font-size: 70px;
}
.btn-circle{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 12px;
height: 130px;
line-height: 1.428571429;
padding: 10px 0;
width: 130px;
text-align: middle;
}
.btn-circle.btn-lg{
border: 7px solid #cfd8dc;
border-radius: 130px;
display: inline-block;
font-size: 18px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
.btn-circle.btn-xl{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 24px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
button .minus{
text-align: center;
margin:auto;
vertical-align: center;
}
.btn-circle span{
vertical-align: center;
margin: auto;
text-align: center;
}
.countdown-overlay{
margin: 20px auto 0 auto;
text-align: center;
}
#media only screen and (max-width: 760px) {
button.btn.btn-circle.btn-lg
{
height:70px;
width:70px;
border-radius:70px;
border-width: 5px;
padding-right:25px;
margin-left:-10px;
}
button .minus
{
text-align:center;
vertical-align: center;
font-size:30px;
}
}
Here is HTML and script
<!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>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row countdown-overlay" style="z-index:2">
<div class="col-xs-3 col-lg-2 col-lg-offset-2">
<script src="js/countdown.js"></script>
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="day">-</span></button>
<p>days</p>
</div>
<div class="col-xs-3 col-lg-2">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="hour">-</span></button>
<p>hours</p>
</div>
<div class="col-xs-3 col-lg-2">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="minute">-</span></button>
<p>minutes</p>
</div>
<div class="col-xs-3 col-lg-2 ">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="second">-</span></button>
<p>seconds</p>
</div>
</div>
</body>
</html>
Reason is padding-right. You must remove padding-right for your class: button.btn.btn-circle.btn-lg inside your #media only screen and (max-width: 760px) {...}.
Check this out.
You are forcing the content to left inside by giving padding-right
Update:
The above solution solves your issue for only if you have two digits in a circular div. If you want more to cover(Like 3 digits: xxx).
You either need to try among following:
1) Increase dimensions for circle (class: .button.btn.btn-circle.btn-lg)
Or
2) Decrease the font-size for .minus class/div.
No other alternative i guess is more suitable.