HTML/CSS Responsive buttons with icons

user_13714820 0
Viewed 2020

currently learning how to develop HTML/CSS websites and I'm struggling to find resources that could help me dev a practice project that I'm doing.

Could anyone teach me how to dev something like this through CSS.

Button Samle

A button with circular icons/image for mobile. I need to make the image/icon circular and fit the button but when I just use this, the whole button resizes to the image size.

<button class="btn"><img src=""></img> Home</button>

And hopefully someone could also help with with the CSS in order to make it something like this on mobile. A menu of buttons that 2 of the buttons take up the whole size of the screen.

Button List

css html
5 Answers

For learning CSS and HTML i don't suggest you to start creating elements like this button because your button is not useful in websites, like its not flat or material its something basic and after days of learning css you can make it. anyway i suggest you to do front-end of this page its much useful for you! and almost every basic ui developer uses this page. I love teaching code's so if you're really interested i can help you in every time you stuck on this project. :) btw i created your button take a look hope you like it. :)

.btn {
padding: 13px 0;
background-color: #fff;
border:1px solid #707070;
width:100%;
display:inline-block;
max-width: 229px;
position: relative;
cursor:pointer;

}

.txt {
font-size: 23px;
color: #707070;
font-weight: 500;
margin-right: 40px;

}

.btn:focus {
outline: 0;

}

.icon {
width: 43px;
height: 43px;
background-color: #fffbc6;
border-radius: 50%;
border: 1px solid #707070;
position: absolute;
top:4px;
left: 9px;

}
<button class="btn"><div class="icon"></div><span class="txt">Button</span></button>

user_136721650

Check this neat button, used font-awesome icons, and bootstrap themed btns

.btn {
  display: inline-block;
  font-weight: 400;
  color: #000;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.1875rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
  color: #fff;
  background-color: #248afd;
  border-color: #248afd;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0276f8;
  border-color: #0270ec;
}
.btn i {
  padding: 0 5px 0 0;
}

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button type="button" class="btn btn-primary btn-icon-text">
<i class="fa fa-upload "></i>
    Upload
</button>

user_115857960
user_114063850 

button{
 display:table;
 width:100px;
 text-align:left;
 padding:2px;
}

button > img {
 display:inline-block;
 vertical-align: middle;
 padding-right:10px;
 }
<button><img src="https://davidwalsh.name/demo/css-circles.png" width="20px" height= "20px">Home</button>

user_116032340
user_42720700
Related