I'm trying to understand how to animate an input button the same way I would a button-styled anchor tag. In the example below, I've styled and animated the anchor, but the input button won't animate.
I think I need to target the value attribute, but I'm not sure how.
How do I style an input tag the same way I've styled the anchor tag?
/* Roboto Font */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
}
a, input[type=submit] {
text-decoration: none;
}
a.nextiva-bttn-anim, input[type=submit].nextiva-bttn-anim {
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
font-weight: 700;
font-size: 20px;
padding: 20px 0;
border-radius: 4px;
text-align: center;
min-width: 230px;
cursor: pointer;
display: inline-block;
}
a.nextiva-blue-bttn, input[type=submit].nextiva-blue-bttn {
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 16px;
border: 0;
border-radius: 4px;
background-color: #005fec;
font-weight: 700;
padding: 13px 0;
text-transform: none;
color: #fff;
outline: 0;
transition: all 0.2s ease;
}
a.nextiva-bttn-anim .bttn-txt, input[type=submit].nextiva-bttn-anim .bttn-txt {
color: inherit;
font-weight: inherit;
display: inline-block;
transform: translateX(10px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim .learn-more-arrow, input[type=submit].nextiva-bttn-anim .learn-more-arrow {
height: 0.75rem;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
}
a.nextiva-bttn-anim:hover .bttn-txt, input[type=submit].nextiva-bttn-anim:hover .bttn-txt {
transform: translate(0px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim:hover .learn-more-arrow, input[type=submit].nextiva-bttn-anim:hover .learn-more-arrow {
opacity: 1;
transition: opacity 0.15s, transform 0.15s;
}<div class="container">
<input type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Tag">
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
<a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
<span class="bttn-txt">Anchor Tag</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</a>
</div>CodePudding user response：
You may want to keep it as an input element e.g. as the submit part of a form.
You can do this, and get the same look, but because an input element cannot have content in the same way as an anchor element we have to add another element.
A fairly standard way of doing that for an input element is to wrap it in a label element. This snippet wraps the input and the span and the img in the label. It is the label that is given the blue background etc and the input is there but with 0 opacity. When the user clicks on it it will still do the submit. (Do you still want to change the value from Submit to Input tag? This snippet removes the value=... but you can of course restore it if that is what you need on submission).
/* Roboto Font */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
}
a,
input[type=submit] {
text-decoration: none;
}
a.nextiva-bttn-anim,
.input {
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
font-weight: 700;
font-size: 20px;
padding: 20px 0;
border-radius: 4px;
text-align: center;
min-width: 230px;
cursor: pointer;
display: inline-block;
}
a.nextiva-blue-bttn,
.input {
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 16px;
border: 0;
border-radius: 4px;
background-color: #005fec;
font-weight: 700;
padding: 13px 0;
text-transform: none;
color: #fff;
outline: 0;
transition: all 0.2s ease;
}
div.input {
position: relative;
}
input[type=submit].nextiva-blue-bttn {
color: transparent;
position: absolute;
opacity: 0;
}
label {
color: white;
}
a.nextiva-bttn-anim .bttn-txt,
.input .bttn-txt {
color: inherit;
font-weight: inherit;
display: inline-block;
transform: translateX(10px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim .learn-more-arrow,
.input .learn-more-arrow {
height: 0.75rem;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
}
a.nextiva-bttn-anim:hover .bttn-txt,
.input:hover .bttn-txt {
transform: translate(0px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim:hover .learn-more-arrow,
.input:hover .learn-more-arrow {
opacity: 1;
transition: opacity 0.15s, transform 0.15s;
}<div class="container">
<label class="input">
<input id="input" type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Tag">
<span class="bttn-txt">Input Tag</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</label>
<a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
<span class="bttn-txt">Anchor Tag</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</a>
</div>CodePudding user response：
Some of your selectors, such as input[type=submit].nextiva-bttn-anim .bttn-txt, won't work because input elements are self-closing and can't have children. See the spec, where is says that the content model of the input element is nothing, meaning it can't contain any Text nodes or element nodes.
If you want to have an element that can have children and can also be used to submit a form, I'd recommend using a <button type="submit"> element instead. It should function the same way as an <input type="submit" /> element, but you can give it the same content as your <a> element and apply the same styling to it.
CodePudding user response：
Just use a <button type="submit"> instead of an <input type="submit" />:
/* Roboto Font */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: "Duru Sans", sans-serif;
font-size: 16px;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
}
a,
button[type=submit] {
text-decoration: none;
font-family: "Duru Sans", sans-serif;
}
a.nextiva-bttn-anim,
button[type=submit].nextiva-bttn-anim {
box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
font-weight: 700;
font-size: 20px;
padding: 20px 0;
border-radius: 4px;
text-align: center;
min-width: 230px;
cursor: pointer;
display: inline-block;
}
a.nextiva-blue-bttn,
button[type=submit].nextiva-blue-bttn {
cursor: pointer;
display: inline-block;
text-align: center;
font-size: 16px;
border: 0;
border-radius: 4px;
background-color: #005fec;
font-weight: 700;
padding: 13px 0;
text-transform: none;
color: #fff;
outline: 0;
transition: all 0.2s ease;
}
a.nextiva-bttn-anim .bttn-txt,
button[type=submit].nextiva-bttn-anim .bttn-txt {
color: inherit;
font-weight: inherit;
display: inline-block;
transform: translateX(10px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim .learn-more-arrow,
button[type=submit].nextiva-bttn-anim .learn-more-arrow {
height: 0.75rem;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
}
a.nextiva-bttn-anim:hover .bttn-txt,
button[type=submit].nextiva-bttn-anim:hover .bttn-txt {
transform: translate(0px);
transition: transform 0.15s;
}
a.nextiva-bttn-anim:hover .learn-more-arrow,
button[type=submit].nextiva-bttn-anim:hover .learn-more-arrow {
opacity: 1;
transition: opacity 0.15s, transform 0.15s;
}<div class="container">
<button type="submit" class="nextiva-bttn-anim nextiva-blue-bttn light"><span class="bttn-txt">Anchor Tag</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow"></button>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
<a href="#" class="nextiva-bttn-anim nextiva-blue-bttn light" value="Input Type">
<span class="bttn-txt">Anchor Tag</span>
<img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
</a>
</div>