--Struggling to figure out why the button is not showing up on my website-- --I am trying to get an animated button to change animations when my mouse hovers over it--I'll worry about linking the button to something at a different time but I mean for instance if I wanted to link it to twitter or something how would I go about doing that?--
button {
min-width: 120px;
height: 36px;
font-size: 16px;
cursor: pointer;
letter-spacing: .1px;
outline: none;
border:none;
border-radius: 2px;
box-shadow: 0 0 0 2px #f7f7f7;
background-color: transparent;
color: #000;
transition: all 200ms ease-in-out;
}
button :hover {
transform: scale(1.1);
background-color: #f7f7f7;
color: #a22274;
font-weight: bold;
box-shadow: 0 0 0 2px #a22274;
letter-spacing: 1.1px;
border-top-left-radius: 16px;
border-bottom-right-radius: 16px;
}
button :active {
transform: scale(1);
}<button>Example</button>the css selectors can't have spaces, so
button :hover //wrong
button:hover // right
button {
min-width: 120px;
height: 36px;
font-size: 16px;
cursor: pointer;
letter-spacing: .1px;
outline: none;
border:none;
border-radius: 2px;
box-shadow: 0 0 0 2px #f7f7f7;
background-color: transparent;
color: #000;
transition: all 200ms ease-in-out;
margin: 0 5px;
}
button:hover {
transform: scale(1.1);
background-color: #f7f7f7;
color: #a22274;
font-weight: bold;
box-shadow: 0 0 0 2px #a22274;
letter-spacing: 1.1px;
border-top-left-radius: 16px;
border-bottom-right-radius: 16px;
}
button:active {
transform: scale(1);
}<p align="center">
<button><a href="twitter.com/TheOnlyDecipher">Twitter page</a></button> <button><a href="Contact.html">Contact Information</a></button> <button><a href="points.html">Points of Interest</a></button>
<button><a href="Learning.html">Learning notes</a></button> <button><a href="Beebs.html">Notes for Wife</a></button> <br />
<br />
</p>