This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 3 years ago.
I'm trying to make a custom checkbox using blocks
.checkbox-container {
height: 18px;
line-height: 18px;
margin: 0;
padding: 0;
display: inline-block;
cursor: pointer;
font-size: 14px;
position: relative;
vertical-align: middle;
}
.label {
margin-left: 4px;
}
.input-box {
display: inline-block;
height: 18px;
width: 18px;
}
.off {
background-color: #fff;
border: 2px solid red;
}
.on {
background-color: red;
border: 2px solid transparent;
}
.on::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 7px;
height: 11px;
border: solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="checkbox-container">
<span class="input-box on"></span>
<span class="label">Checkbox</span>
</div>
How can I center the text vertically in this block?
Just add vertical-align: super; prop in your .label class.
.label {
margin-left: 4px;
vertical-align: super;
}
.checkbox-container {
height: 18px;
line-height: 18px;
margin: 0;
padding: 0;
display: inline-block;
cursor: pointer;
font-size: 14px;
position: relative;
vertical-align: middle;
}
.label {
margin-left: 4px;
vertical-align: super;
}
.input-box {
display: inline-block;
height: 18px;
width: 18px;
}
.off {
background-color: #fff;
border: 2px solid red;
}
.on {
background-color: red;
border: 2px solid transparent;
}
.on::after {
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 7px;
height: 11px;
border: solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div class="checkbox-container">
<span class="input-box on"></span>
<span class="label">Checkbox</span>
</div>
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I have a button with an arrow inside. Currently, the arrow transitions to the right when the arrow inside of the button is hovered, but I would like the arrow to transition when the button is hovered.
button {
font-family: 'Raleway', sans-serif;
font-size: 15px;
line-height: 22.6px;
background-color: transparent;
padding: 16px 32px 16px 40px;
cursor: pointer;
}
.btn-black {
border: 4px solid #000000;
color: #000000;
}
.btn-grey {
border: 4px solid #45423C;
color: #45423C;
}
.arrow {
height: 2px;
width: 25px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 15px;
margin-bottom: 4px;
}
.arrow:hover {
transition: all .4s ease;
width: 35px;
margin-right: 5px;
}
.arrow-black {
background: black;
}
.arrow-grey{
background: #45423C;
}
.arrow:before, .arrow:after {
content: "";
background: black;
position: absolute;
height: 2px;
width: 10px;
border-radius: 30%;
}
.arrow:before {
right: -2px;
bottom: -3px;
transform: rotate(-45deg);
}
.arrow:after {
right: -2px;
top: -3px;
transform: rotate(45deg);
}
<button class="btn-black"><span class="arrow arrow-black"></span>WHO WE ARE</button>
You have a transition issue since it is defined only for the hovered arrow. If you move it to .arrow itself the transition is working in both directions. And if you want the "animation" take effect when the button is hovered then define :hover for the button.
Working example:
button {
font-family: 'Raleway', sans-serif;
font-size: 15px;
line-height: 22.6px;
background-color: transparent;
padding: 16px 32px 16px 40px;
cursor: pointer;
}
.btn-black {
border: 4px solid #000000;
color: #000000;
}
.btn-grey {
border: 4px solid #45423C;
color: #45423C;
}
.arrow {
height: 2px;
width: 25px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 15px;
margin-bottom: 4px;
transition: all .4s ease;
}
button:hover .arrow {
width: 35px;
margin-right: 5px;
}
.arrow-black {
background: black;
}
.arrow-grey {
background: #45423C;
}
.arrow:before,
.arrow:after {
content: "";
background: black;
position: absolute;
height: 2px;
width: 10px;
border-radius: 30%;
}
.arrow:before {
right: -2px;
bottom: -3px;
transform: rotate(-45deg);
}
.arrow:after {
right: -2px;
top: -3px;
transform: rotate(45deg);
}
<button class="btn-black">
<span class="arrow arrow-black"></span>
WHO WE ARE
</button>
I'm trying to add the triangle pointer directly in the middle of the anchor element. I tried using the transform property but its not working for the x coordinate:
.navigation-bar > a {
float:right;
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: white;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
}
.navigation-bar > a:hover:before {
content: "";
position: absolute;
transform: translateX(350px);
transform: translateY(40px);
width: 0px;
height: 7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
}
You can do this like that way....
.navigation-bar>a {
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: #000;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
background: red;
}
.navigation-bar>a:before {
content: "";
position: absolute;
transform: translateY(-10px);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid red;
}
<div class="navigation-bar">
html
</div>
I want to create the following button until tomorrow
I managed to create this with only css and html
and here is my code.
.date {
color: #7ed2f6;
font-size: 40px;
font-weight: bold;
}
.save {
color: white;
font-size: 40px;
font-weight: bold;
}
.pill-button {
border: 0.2em solid white;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 60px;
}
.right {
display: inline-block;
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
display: inline-block;
}
<a href="#" class="pill-button">
<span class="save">Save The Date</span>
<div class="greyline"></div>
<span class="date">Σάββατο 19/9/2020 16:30-17:30</span>
<span class="right"></span>
</a>
I cant make it work with the line change
I know this snippet doesn't have the same dimensions as yours but I think it should help you out.
body {
background-image: linear-gradient(to right, #1b2e52, #243f73);
margin: 3em;
}
.pill-button {
background-color: transparent;
font-size: 1em;
border: 0.125em solid white;
color: white;
margin: 1em 0;
padding: 0.625em 4.375em 0.625em 1.25em;
display: inline-flex;
align-items: center;
cursor: pointer;
border-radius: 3.75em;
text-decoration: none;
font-family: sans-serif;
position: relative;
width: 33.125em;
box-sizing: border-box;
}
.pill-button::before {
content: "";
width: 2.5em;
height: 2.5em;
border: 0.125em solid white;
border-radius: 50%;
position: absolute;
right: 0.375em;
top: 50%;
transform: translateY(-50%);
}
.pill-button::after {
content: "";
display: inline-block;
width: 0.625em;
height: 0.625em;
border-top: 0.1875em solid white;
border-right: 0.1875em solid white;
position: absolute;
right: 1.5em;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.pill-button__save {
color: white;
font-size: 1.875em;
font-weight: bold;
padding-right: 0.5em;
margin-right: 0.5em;
position: relative;
min-width: 7em;
}
.pill-button__save::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.0333333333em;
height: 1.1666666667em;
background-color: #8d9ab1;
}
.pill-button__date {
color: #7ed2f6;
font-size: 1.25em;
font-weight: bold;
text-align: center;
}
.pill-button__time-range {
display: block;
}
<a href="#" class="pill-button">
<span class="pill-button__save">Save The Date</span>
<span class="pill-button__date">Σάββατο 19/9/2020 <span class="pill-button__time-range">16:30-17:30</span></span>
</a>
<button class="pill-button">
<span class="pill-button__save">Save The Date</span>
<span class="pill-button__date">Σάββατο 19/9/2020 <span class="pill-button__time-range">16:30-17:30</span></span>
</button>
The main idea to do this with flex. I did small refactoring.
.date{
color:#7ed2f6;
font-size:40px;
font-weight: bold;
}
.save{
color:white;
font-size:40px;
font-weight: bold;
}
.pill-button {
background-color: blue;
border: 0.2em solid white;
color: white;
padding: 10px 20px;
text-align: center;
/* Added */
display: flex;
align-items: center;
justify-content: space-between;
/* End Added */
margin: 4px 2px;
cursor: pointer;
border-radius: 60px;
}
.right {
/* display: inline-block; */
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
/* display: inline-block; */
}
<a href="#" class="pill-button">
<span class="save">Save The Date</span>
<div class="greyline"></div>
<span class="date">Σάββατο 19/9/2020 16:30-17:30</span>
<span class="right"></span>
</a>
.date{
color:#7ed2f6;
font-size:40px;
font-weight: bold;
display: inline-block;
padding-left:15px;
margin-left:15px;
border-left: 2px solid #8d9ab1;
line-height:1;
}
.save{
color:white;
font-size:20px;
font-weight: bold;
vertical-align:middle;
}
.pill-button {
border: 0.2em solid white;
color: white;
padding: 10px 10px;
text-align: center;
display: flex;
width: max-content;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
align-items: center;
background-color:#152b47;
}
.right {
display: inline-block;
width: 4em;
height: 4em;
border: 0.3em solid white;
border-radius: 50%;
margin-left: 1.5em;
}
.right:after {
content: '';
display: inline-block;
margin-top: 1.05em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.3em solid white;
border-right: 0.3em solid white;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.greyline {
border-left: 2px solid #8d9ab1;
height: 81px;
display: inline-block;
}
<div class="pill-button">
<span class="save">Save The Date</span>
<div class="date">
Σάββατο 19/9/2020<br>
16:30-17:30
</div>
<span class="right"></span>
</div>
I'm trying to get this layout.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/kCjW9"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Here's the code I have. I can't seem to get z-index to work so that I could bring black border on top of the background.
<blockquote class="imgur-embed-pub" lang="en" data-id="a/6a7Ev"></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
.btn {
border-radius: 0px!important;
font-family: $font-roboto!important;
font-size: 1.125rem!important;
text-shadow: none!important;
box-shadow: none!important;
&.fountain-blue {
background-color: $color-fountain-blue;
color: #fff;
margin-left:5px;
margin-top: 5px;
margin-right: -10px;
}
}
.btn-border {
border: 2px solid #000;
display: inline-block;
height: 40px;
z-index: 9999!important;
}
<div class="btn-border mt-4">
learn more about us
</div>
There are a lot of ways to do this but simple method is to use pseudo-elements. check out the snippet.
CODEPEN (SASS version)
#import url("https://fonts.googleapis.com/css?family=Roboto");
.btn {
border-radius: 0px;
font-size: 1.125rem;
text-shadow: none;
box-shadow: none;
display: block;
width: calc(100% - 25px);
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.btn.fountain-blue {
background-color: #65becf;
color: #fff;
margin-left: 5px;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.btn-border {
display: inline-block;
height: 40px;
z-index: 9999;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn-border:after {
content: '';
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="btn-border mt-4">
READ MORE
</div>
You should do it something like this, but than with your own colors and sizes.
.btn {
display: inline-block;
border: 1px solid black;
position: relative;
padding: 10px 20px;
margin: 20px;
color: #fff;
}
.btn:before {
background-color: blue;
border-color: green;
border-style: solid;
border-width: 10px 5px 5px 10px;
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: -5px;
left: -5px;
content: "";
}
<a class="btn">Read more</a>
As a possible solution.
* {
box-sizing: border-box;
}
body {
margin: 2em;
}
.btn {
background-color: darkblue;
color: white;
border: .2em solid white;
height: 2.5em;
width: 7em;
position: relative;
cursor: pointer;
}
.btn:before {
content: " ";
width: 9em;
height: 4em;
background-color: lightblue;
position: absolute;
top: -1em;
left: -1em;
z-index: -1;
}
.btn:after {
content: " ";
position: absolute;
background-color: transparent;
border: thin solid black;
height: 2em;
width: 6.5em;
top: -.5em;
left: -.5em;
}
<button class="btn">Click me</button>
This question already has answers here:
How do I center an anchor element in CSS?
(14 answers)
Closed 5 years ago.
For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Wrap it in a DIV tag that has text-align: center;:
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
.x {
text-align: center;
}
<div class="x">demo</div>
Used margin: 0 auto; for centering and changed a tag to display: block; Also added a width to it.
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
width: 50px;
display: block;
margin: 0 auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
You have to make a tag a block element.So rather than inline-block use display:block.And to center use margin:0 auto;
.button {
display: block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.myButton {
width: 150px;
margin: 10px auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
demo
The "a"-Element is contained in another Element. In the case of your example it is in the Body-Element. This Element need to have its elements centered, so you would need to set a rule like this:
body {
text-align: center;
}
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
text-align: center;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
body {
text-align: center;
}
demo
.button {
display: inline-block;
position: absolute;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: calc(50% - 88px);
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Just change yours .button class CSS to this one:
.button {
display: inline-block;
position: absolute;
width: 20px;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
It will surely work. Thanks.
Use transform to do the trick.
.button {
left: 50%;
transform: translateX(-50%);
}
.button {
left: 50%;
transform: translateX(-50%);
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none !important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo