I'm trying to create a button with CSS where the design adds a box shadow to frame the right that remains in position with the icon. On hover the button extends to the right creating the effect that you are pulling a tab. However, I'm struggling on the element of adding an icon.
EDIT: Icon is added, however, how do you remove white space in anchor links? For example, if I set padding top and bottom to 0px, how does the text not touch the top & bottom of background colour? There appears to be dead space.
CodePen Link
<a class="button" href="" title="">Terms & Conditions<span></a>
CSS
a.button {
display: inner-block;
wdith: 100%;
padding: 0em 4.5em 0em 1em;
background: linear-gradient(90deg, #7D80DA, #8EEDF7);
text-align: center;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border: none;
border-radius: 5px;
box-shadow: inset -35px 0px 0px #7d80da;
transition: all 0.3s ease 0s;
cursor: pointer;
position: relative;
white-space: nowrap;
}
a.button:after {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
right: 4%;
}
a.button:hover {
padding-right: 8em;
}
First, add position: relative; with your button code
And use this code:
a.button:after{
content: 'ยป';
position: absolute;
right: -30px;
/*Your more css here*/
}
Related
just to preface I would say I'm rather new at coding, in particular, this is related to web coding.
I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine.
However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.
I've tried to edit the position (left) of each menu item but it doesn't seem to be working.
Visualisation of the problem
here is the HTML coding for it:
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav>
And here is the CSS
nav {
position: relative;
width: 100%;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}
nav a{
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
/* display: inline-block; */
text-align: center;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: whitesmoke;
border-radius:8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width:120px
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 120px;
left: 00;
}
nav a:nth-child(2){
width: 120px;
}
nav a:nth-child(2):hover~.animation{
width: 150px;
left:102px;
}
nav a:nth-child(3){
width: 120px;
}
nav a:nth-child(3):hover~.animation{
width: 140px;
left: 230px;
}
nav a:nth-child(4){
width: 120px;
}
nav a:nth-child(4):hover~.animation{
width: 140px;
left: 350px;
}
nav a:nth-child(5){
float:right;
margin-right: 40px;
}
nav a:nth-child(5):hover~.animation{
width: 150px;
left: 1290px;
}
a:hover{
color: #c18392;
}
(Also I am aware the navbar doesn't navigate to anything yet)
Please help!
And thank you in advance
nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.
nav a:same as you have added.
nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense.
hover:adding different bgcolor on hover. but you can do anything you want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
width: 100vw;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
nav a {
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
}
nav a:nth-child(5) {
margin-left: auto;
}
a:hover {
background-color: whitesmoke;
}
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav
There's empty space to the far right of a header I'm using on all pages. When the window is maximized, the header extends all the way to the right, but when the window is resized smaller, the empty space not only appears, but widens as the window is resized. min-width: 100% hasn't fixed this.
Here's the CSS. .headerItem has padding to it, and that was the initial culprit, but after removing all the padding, the space still persists.
.Header {
height: 2.5rem;
min-width: 100%;
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #282828;
border-bottom: 3px solid;
border-color: black;
text-decoration: none;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.Header a {
text-decoration: none;
}
.headerItem {
height: 100%;
line-height: 2.6rem;
background-color: #232227;
font-family: 'Montserrat', sans-serif;
font-size: medium;
margin-bottom: 10px;
padding-left: 1rem;
padding-right: .65rem;
padding-top: .25rem;
padding-bottom: .25rem;
font-variant: small-caps;
font-weight: 600;
transition-property: color;
transition-duration: 2s;
letter-spacing: .4rem;
color: #D6A83D;
border: solid 1px;
}
.headerItem:hover {
transition: .25s;
color: #ffec00;
border-color: #ffec00;
cursor:default;
}
All of the wrappers have also been reduced/edited to see if this would disappear, but it hasn't.
edit: Forgot the header
This is the answer, a very simple one, too: the buttons wouldn't resize while the header would, so they extend past the header.
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
When i hover over the question mark icon, the tool tip gets hide behind the header tab.
Look the attached image!!!
enter image description here
i need the tool tip to come above the header tab without getting hide.
This is my CSS enter image description here
.showmeonhover { display: none; }
.label-input100:hover .showmeonhover {
display: inline;
width: auto;
background-color: white;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px 0;
border-color: #555 transparent transparent transparent;
bottom: 125%;
background-color: #555;
/* Position the tooltip */
position: absolute;
margin-left: -100px;
margin-bottom: -18px;
padding-left: 6px;
padding-right: 5px;
z-index: 200;
font-size: 8px !important;
text-transform:capitalize !important;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
font-size: 100%;
}
Sorry for my english.
You can try to define the z-index in your css-class.
like:
.headerTab{
z-index: 0;
}
.showmeonhover{
z-index: 1;
}
i'm working on this element http://zag-test.nowcommu.myhostpoint.ch/
what i need is to "enalrge" the entire element in the same position, but via CSS i can on enlarge the central button (CLICK button).
How can i solve?
CSS
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -3.78em;
padding-top: 0em;
width: 7.5em;
height: 7.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #000;
color: #f9d70a;
text-align: center;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
You can use the transform attribute with scale to make everything bigger:
#cn-wrapper {
transform: scale(1.4) !important;
}
This is for the outer menu options, and the !important forces it to be used