I need to create button like this
You can see a rounded borders on center of sides. I'm tried to do it with after and before classes, but it was tricky. Which solution is the cleanest? Also I'm done on dev resizeble button and it'll be better if this can be done as one figure, without absolute positioning or smth like that
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
button {
text-transform: uppercase;
background-color: #F9EFCA;
border: none;
padding: 20px 100px;
cursor: pointer;
letter-spacing: 1px;
border-bottom: 10px solid #ae9e5c !important;
box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -5px rgba(0, 0, 0, .25);
font-size: 50px;
transition: .2s all;
position: relative;
border-radius: 10px;
}
button:hover,
button:active {
transition: .2s all;
border-bottom: none !important;
}
button:before,
button:after {
content: '';
position: absolute;
top: 9%;
bottom: 0;
height: 91%;
background: #F9EFCA;
width: 10px;
border-radius: 100%;
}
button:before {
left: -4px;
}
button:after {
right: -4px;
}
button:active:before,
button:active:after,
button:hover:before,
button:hover:after {
top: 9%;
bottom: 0;
height: 82%;
}
<button>Call me</button>
Codepen example
create a new button class and try this in your CSS:
.button_costum
{
margin: 10px auto;
font-size: 2.0rem;
padding: 1.25rem 2.5rem;
display: block;
background-color: // choose what you want
border: 1px solid transparent;
color: // choose what you want
font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 20px; // in your case it shout be 25 or 30
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
try using the property on button
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
This would help you target the button corners without distorting the shape of the button itself.
Related
.color-palette {
border-top: 2px solid lightgrey;
max-height: 32vh;
z-index: 1;
background: rgba(0, 0, 0, 0.75);
width: 90vw;
bottom: 2.75rem;
border-radius: 10px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
padding: 0.75rem 0.5rem;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0px 5px 10px black;
animation-name: zoomIn;
animation-duration: 0.5s;
}
button {
font-family: inherit;
font-size: 0.8rem;
line-height: 0.9;
width: 3.75rem;
height: 3.75rem;
margin: 0.45rem 0.3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.5s;
border: none;
outline: none;
text-decoration: none;
text-align: center;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 0px grey, 0px 3px 0px 0px lightgrey,
0px 8px 5px #999;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
font-family: "Comic Neue", cursive;
width: 8.5rem;
font-size: 1rem;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 500;
bottom: 110%;
left: 35%;
margin-left: -60px;
}
span {
display: none;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
display: block;
}
<div class="color-palette">
<button class="tooltip">
<span class="tooltiptext">Cannot duplicate</span>
</button>
</div>
I got the tooltip code from https://www.w3schools.com/css/css_tooltip.asp.
I tried the answer here: CSS tooltip getting cut off
And have applied overflow: visible on my color-palette instead of overflow-y: auto; overflow-x: hidden; but this happened:
Yes, the tooltip worked, but my buttons were already outside the div (.color-palette).
I want this to work without removing the bottom arrow of the tooltip, without moving the tooltip downwards, without increasing the div to make the tooltip fit inside. All I want is to make the tooltip overlap. What to do?
Try changing value from 110 to 95 in the class:
.tooltip .tooltiptext {
bottom: 95%;
}
Update:
change top value in class
.tooltip .tooltiptext::after {
top: 100%;
}
Try this fiddle: https://jsfiddle.net/ecxobpg3/38/
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
I'm trying to replicate the navigation buttons here, that's a wix website so it's so hard to inspect elements.
What I have tried is here
https://jsfiddle.net/1vngy4uo/1/
I'm trying many variations, never getting the css 100% correct.
.navButton {
width:15%;
display:inline-block;
position:relative;
background-color:#03314b;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover {
background-color:#98b7c8;
}
.navButton span {
width:100%;
display:inline-block;
position:absolute;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton .bg {
height:50%;
top:0;
background-color:#3a6076 ;
border-radius: 30%;
box-shadow: 2px 2px 2px #888888;
}
.navButton:hover .bg{
background-color:#afcad9;
}
.navButton .text {
position:relative;
text-align:center;
color:#fff;
vertical-align: middle;
align-items: center;
}
.navButton .text:hover {
color:#000000;
}
and html
<a href="contact.html" class="navButton">
<span class="bg"></span>
<span class="text">Contact</span>
A very similar one, using linear-gradient and less HTML markup
jsFiddle
.navButton {
color: white;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
padding: 0 30px;
line-height: 30px;
display: inline-block;
position: relative;
border-radius: 20px;
background-image: linear-gradient(#335b71 45%, #03324c 55%);
box-shadow: 0 2px 2px #888888;
transition: color 0.3s, background-image 0.5s, ease-in-out;
}
.navButton:hover {
background-image: linear-gradient(#b1ccda 49%, #96b4c5 51%);
color: #03324c;
}
Contact
I just used a div element to implement the same button that you referred. Is this what you want?
https://jsfiddle.net/9L60y8c6/
<div class="test">
</div>
.test {
cursor: pointer;
background: rgba(4, 53, 81, 1) url(//static.parastorage.com/services/skins/2.1212.0/images/wysiwyg/core/themes/base/shiny1button_bg.png) center center repeat-x;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
transition: background-color 0.4s ease 0s;
position: absolute;
top: 0;
bottom: 0;
left: 5px;
right: 5px;
height: 30px;
width: 115px;
}
Would this be a start? You might want to adjust the colors a little.
Note: One can use linear-gradient, though it won't work on IE9, so I use a pseudo instead
.navButton {
width: 15%;
display: inline-block;
position: relative;
background-color: #03314b;
border-radius: 8px;
box-shadow: 2px 2px 2px #888888;
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px;
transition: all 0.3s;
overflow: hidden;
}
.navButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background-color: #335b71;
transition: all 0.3s;
}
.navButton span {
position: relative;
}
.navButton:hover {
transition: all 0.3s;
background-color: #96b4c5;
color: black;
}
.navButton:hover:before {
transition: all 0.3s;
background-color: #b1ccda;
}
<a href="contact.html" class="navButton">
<span>Contact</span>
</a>
I have a DIV with an "arrow" at the bottom, not unlike a speech bubble from a comic book, which appears on the hover state:
The arrow is created with the :after and :before pseudo elements.
I have a transition for the hover for the border color and the box shadow.
My problem is that the "arrow" just "appears". No fade like the other items, but I can't figure out how to target the "arrow". "All" does not look right either.
Ideally, I'd love to have a delay on the arrow and a simple fade or wipe.
Here's the CSS:
.item-selector-button {
position: relative;
text-align: center;
cursor: pointer;
border: 1px solid #cecece;
padding: 15px;
border-radius: 0;
color: #000;
width: 160px;
height: 120px;
transition: all ease-in-out 0.1s, box-shadow ease-in-out 0.1s;
}
.item-selector-button .title {
color: #3e53a4;
font-size: 12px;
margin: 0;
padding-top: -3px;
font-family: "PrecisionSans_W_Md", "Helvetica Neue", Arial, sans-serif;
}
.item-selector-button .divider {
height: 1px;
width: 20px;
background-color: #cecece;
margin: 4px auto 10px;
}
.item-selector-button .image {
background: #fff url("../images/box.png") center center no-repeat;
width: 64px;
height: 57px;
margin: 4px auto;
}
.item-selector-button:hover, .item-selector-button.hover {
padding: 14px;
}
.item-selector-button:hover:after, .item-selector-button.hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #fff transparent;
transition-delay: 0.3s;
}
.item-selector-button:hover:before, .item-selector-button.hover:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active, .item-selector-button.active {
border-width: 2px;
border-color: #3e53a4;
background-color: #3e53a4;
}
.item-selector-button:active:before, .item-selector-button.active:before {
content: "";
position: absolute;
bottom: -15px;
left: 65px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button:active .title, .item-selector-button.active .title {
color: #fff;
}
.item-selector-button:active .divider, .item-selector-button.active .divider {
background-color: #fff;
}
.item-selector-button:active .image, .item-selector-button.active .image {
background-color: #3e53a4;
}
.item-selector-button:active:hover, .item-selector-button.active:hover {
padding: 15px;
box-shadow: none;
}
.item-selector-button:active:hover:after, .item-selector-button.active:hover:after {
content: "";
position: absolute;
bottom: -12px;
left: 68px;
border-width: 12px 12px 0;
border-style: solid;
border-color: #3e53a4 transparent;
transition-delay: 0.3s;
}
.item-selector-button.disabled {
pointer-events: none;
cursor: not-allowed;
}
.item-selector-button.disabled .title {
color: #c3c3c3;
}
.item-selector-button.disabled .image {
background-image: url("../images/box-disabled.png");
}
.item-selector-button.disabled:hover {
padding: 15px;
border: 1px solid #cecece;
box-shadow: none;
}
You only have pseudoelements on the hovered element, so there is nothing to transition from/to. You need to add the pseudo elements on the non-hover state element.
Example transitioning visibility:
.item-selector-button:before {
.arrow-inside(...);
transition:all 5s ease;
transition-delay: 0.3s;
visibility:hidden;
}
.item-selector-button:after {
.arrow-outside(...);
transition:all 5s ease;
transition-delay: 0.3s;
visibility:hidden;
}
.item-selector-button:hover:before {
visibility:visible;
}
.item-selector-button:hover:after {
visibility:visible;
}