how to make html button like this picture?
two line text.vertical centered.
here is my code
.btn {
display: block;
background: #ffffff;
box-shadow: none;
border: 1px solid #CECECE;
border-radius: 4px;
margin-bottom: 5px;
color: #19d197;
}
.bz-fa-icon {
margin-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<button class="btn"><i class="fa fa-check bz-fa-icon"></i>
Confirm<br>
Return
</button>
Change some CSS
.btn {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #cecece;
border-radius: 4px;
box-shadow: none;
color: #19d197;
display: block;
margin-bottom: 5px;
padding: 0 10px 0 30px;
position: relative;
}
.bz-fa-icon {
left: 5px;
margin-right: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
https://jsfiddle.net/8kwyjsho/
Try this:
You can also wrap the text and span inside a div then wrap that div and img inside another div then add these classes:
also add display: inline-block; on your img
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;;
display: block;
}
img {
vertical-align: middle;
display: inline-block;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
<div class="btnText">
Button
<span>Button alt</span>
</div>
</div>
</a>
Change to this code.
.btn {
width:80px;
height:40px;
display: block;
background: #ffffff;
box-shadow: none;
border: 1px solid #CECECE;
border-radius: 4px;
margin-bottom: 5px;
color: #19d197;
}
.bz-fa-icon {
display: block;
float:left;
margin-top:9px;
margin-right: 5px;
}
A flexbox option:
.btn {
display: inline-flex;
align-items: center; /* vertical alignment of items */
line-height: 16px;
padding: 5px 13px;
background: none;
border: 1px solid #CECECE;
border-radius: 3px;
color: #19d197;
}
.inner {
text-align: left;
padding-left: 7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<button class="btn"><i class="fa fa-check bz-fa-icon"></i>
<div class="inner">Confirm <br /> Return</div>
</button>
Related
I created div that contains 2 tags: span and i.
I tried to add on hover on the div that will change the color and cursor but on the i tag the color doesn't change.
.example {
margin: 20px;
position: fixed;
display: inline;
}
.example i {
border: solid #8690ab;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
line-height: 10px;
position: relative;
top: -15px;
}
.example span {
display: inline-block;
padding: 0px;
color: #8690ab;
margin: 5px 15px;
vertical-align: middle;
position: relative;
top: -15px;
}
.example:hover, .example:hover i, .example:hover span{
cursor: pointer;
color: #a9afc0;
}
<div class="example">
<span>text</span>
<i className="arrowdown"></i>
</div>
How to also change the color of the i tag?
There is better way to do it?
The color tag only changes the color of the text in the tag. Since there's no text, nothing will happen. You can try changing the border-color, if that's what is required:
.example:hover, .example:hover i, .example:hover span{
cursor: pointer;
border-color: #a9afc0;
color: #a9afc0;
}
.example {
margin: 20px;
position: fixed;
display: inline;
}
.example i {
border: solid #8690ab;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
line-height: 10px;
position: relative;
top: -15px;
}
.example span {
display: inline-block;
padding: 0px;
color: #8690ab;
margin: 5px 15px;
vertical-align: middle;
position: relative;
top: -15px;
}
.example:hover, .example:hover i, .example:hover span{
cursor: pointer;
color: #4287f5;
cursor: pointer;
border-color: #4287f5;
}
<div class="example">
<span>text</span>
<i className="arrowdown"></i>
</div>
I have been trying to align some text inside a circle in my webpage.
So far i have been able to come up with the following:
From looking at it, it's not the best solution so I was wondering if you have any recommendation how to make sure that the text "LM" or "TM" is perfectly centered inside the circle (if that's possible).
Here is the fiddle:
Sample Demo
html:
.performance-box-container {
margin: 5px;
padding: 5px;
}
.performance-box {
width: 120px;
height: 60px;
margin: 0px 5px 5px 0px;
padding: 5px 5px 10px 5px;
border: 2px solid #868686;
background-color: rgba(202, 202, 202, 0.5);
display: inline-block;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
display: inline-block;
}
.performance-box-name-in-circle span {
display: table-cell;
vertical-align: middle;
height: 40px;
width: 40px;
text-align: center;
padding: 0;
margin: 0;
}
.performance-box-stats {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.performance-box-stats p {
line-height: 1.5;
margin: 0;
}
.performance-box-stats span.positive {
color: #388C00;
}
.performance-box-stats span.unchanged {
color: #000;
}
.performance-box-stats span.negative {
color: #f00;
}
<div class="performance-box-container">
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>TM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
</div>
You can vertically and horizontally align them center using flexbox
display: flex;
justify-content: center;
align-items: center;
.performance-box-name-in-circle,
.performance-box-name-in-circle span {
display: flex;
justify-content: center;
align-items: center;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
}
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
Here is the Updated JSFiddle
Used flexbox to display performance-box-name-in-circle and performance-box-stats side by side and used below css to place span in the center of the circle. Hope this helps. thanks
margin: 50%;
display: inline-block;
transform: translate(-50%, -50%);
.performance-box-container {
margin: 5px;
padding: 5px;
display: flex;
}
.performance-box {
width: 120px;
/* height: 60px; */
margin: 0px 5px 5px 0px;
padding: 5px 5px 10px 5px;
border: 2px solid #868686;
background-color: rgba(202, 202, 202, 0.5);
/* display: inline-block; */
display: flex;
justify-content: center;
align-items: center;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
display: inline-block;
}
.performance-box-name-in-circle span {
display: table-cell;
*/
/* vertical-align: middle; */
/* height: 40px; */
/* width: 40px; */
/* text-align: center; */
padding: 0;
margin: 0;
margin: 50%;
/* margin-top: 80px; */
display: inline-block;
transform: translate(-50%, -50%);
}
.performance-box-stats {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.performance-box-stats p {
line-height: 1.5;
margin: 0;
}
.performance-box-stats span.positive {
color: #388C00;
}
.performance-box-stats span.unchanged {
color: #000;
}
.performance-box-stats span.negative {
color: #f00;
}
<body>
<div class="performance-box-container">
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>TM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
</div>
</body>
I need a red cross (font awesome icon) on the button.
The code I tried is at JSFiddle.
But I need:
UPDATE
I thought having a solution with a small code will help to execute on all codes related to it and therefore accepted Kiranvj's answer earlier.
But while changing codes as per Kiranvj's answer to the main code I couldn't achieve the expected results.
Full Code:
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
I need that cross on all blue color buttons. (Sometimes all, sometimes 1 or 2. So div or i should be separate for each button)
Note: Placements of buttons can be anywhere, try to avoid left, right from the screen.
JSFiddle with different answers:
Kiranvj's answer (Recomended)
Anmol Sandal's answer (Option 2)
SWC's answer
Aryan Twanju's answer
A.Sakkeer's answer
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
.button_cstm_ll:before, .button_cstm_ll:after {
position:absolute;
content: '';
top: -5px;
bottom: -5px;
width: 5px;
background: #ff0000;
left: 0;
right: 0;
margin: 0 auto;
}
.button_cstm_ll:before {
transform: skew(30deg);
}
.button_cstm_ll:after {
transform: skew(-30deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
Try this
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
i#cmplt:before {
position: absolute;
font-size: 1.5em;
left: 10px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times fa-3x" style="color: red;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
If you add the icon within the button and assign position: relative to the button and position: absolute to the icon then it should work. You can then position it with left, right and transform:
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
You can use position: relative and position: absolute to get the desired result. Try this code.
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
height: 100px;
width: 100px;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_ll .fas {
position: absolute;
left: 0;
top: 0;
font-size: 150px;
line-height: 0.7;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
#cmplt:before {
position: absolute;
left: 14px;
top: 22px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times" style="color: red;font-size:70px;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
I know this question has been asked a lot and I have done considerable research on this point (here on Stack Overflow and elsewhere via Google, etc.) but I cannot find an answer which handles the point I am running into.
I have a dropdown with the following code:
HTML
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
CSS
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span{
display: inline-block;
color: white;
}
I have also made a jsfiddle with the above code here.
I am trying to figure out how to get the two <span>s to be vertically centered in the dropdown.
Flexbox can do that
.dropdown {
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
display: flex;
align-items: center;
}
.dropdown .box {
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span {
display: inline-block;
color: white;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
▶ 1st Option:
As, in your code, you use display: inline-block for all the span elements as well as .box, you can just add vertical-align: middle to your code as follows:
.dropdown .box, .dropdown span {
vertical-align: middle;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown .box,
.dropdown span {
vertical-align: middle;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
▶ 2nd Option:
Another option you have is to change the display of .dropdown to display: flex and set align-items: center as shown below:
.dropdown {
display: flex;
align-items: center;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown {
display: flex;
align-items: center;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
Try this one out:
HTML:
<div class="dropdown">
<div class="box">T</div>
<ul data>
<li><span class="phone-number">(999) 999-999</span></li>
<li><span class="email">temp#temp.com</span></li>
</ul>
</div>
CSS:
.data li{
list-style:none;
}
I wanted to ask what is the best way to create such button with css:
I was trying to create such button with divs using float left and right, but when i zoom in and out right side of the button drops down. Is there a better way to achieve this?
fiddle link
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
<div>text</div>
</div>
<div><div></div></div>
</div>
</div>
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 15px;
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
All it takes:
button.styled{
color:#fff;
background:#00B48C; /* CHANGE ONLY THIS ONE AND SEE IT HAPPEN ;) */
padding:10px 45px 10px 15px;
border-radius:4px;
/* Do not edit below */
border:0;
position:relative;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
button.styled:after{
background: rgba(0,0,0,0.2);
padding:11px;
content:'\25be'; /* \25bc \25be */
/* Do not edit below */
position:absolute;
right:0;
top:0;
}
<button class="styled">Hello World</button>
For more UTF-8 characters see: https://stackoverflow.com/a/25986009/383904
you can use only one element with pseudo elements :before and :after
button {
border-radius: 4px 0px 0px 4px;
border-width: 1px;
border-color: #008f70;
border-style: solid;
background-color: #00b48c;
text-align: right;
padding: 15px;
width: 165px;
position: relative;
color: white;
}
button:before {
content: '\25BE';
position: absolute;
right: -32px;
z-index: 1;
font-size: 16px;
top: 50%;
color: white;
transform: translatey(-50%);
}
button:after {
content: '';
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin-right: 9px;
background-color: #008f70;
width: 54px;
position: absolute;
top: -1px;
left: 100%;
bottom: -1px
}
button:focus {
outline: 0;
box-shadow: none;
}
<button>test</button>
Get rid of the duplicate div with text and add top and bottom padding to the other div with text.
You can use Font Awesome to get the caret sign in the dropdown.
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 22px 15px 26px 15px; /* add top and bottom border */
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
i{
margin-left: 45%;
margin-top: 45%;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
</div>
<div><div><i class="fa fa-caret-down"></i></div></div> <!-- add the caret -->
</div>
</div>
Updated jsFiddle
Source