www/src/layouts/partials/detail-btn-large.html

39 lines
842 B
HTML
Raw Normal View History

2022-09-14 19:17:59 +03:00
<style>
.detail-btn-large{
display:inline-block;
font-family: "pp-neue-machina", sans-serif;
2022-09-16 19:18:34 +03:00
font-size: 1.116vw;
2022-09-14 19:17:59 +03:00
background-color: #1a1a1a;
border: .5px solid #ffffff;
color: #fff;
2022-09-16 19:18:34 +03:00
padding-top: 0.279vw;
2022-09-14 19:17:59 +03:00
text-decoration: none;
text-transform: uppercase;
2022-09-15 04:29:56 +03:00
width: 50%;
2022-09-16 19:18:34 +03:00
height: 4.185vw;
2022-09-15 04:29:56 +03:00
transition: 0.2s ease-in-out;
2022-09-14 19:17:59 +03:00
}
.detail-btn-large:hover{
background-color: #8000ff;
2022-09-16 19:18:34 +03:00
box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
2022-09-14 19:17:59 +03:00
}
2022-09-15 04:29:56 +03:00
/* Icon Styling */
.detail-btn-large .icon-enter-arrow{
display: inline-block;
position: relaitve;
2022-09-16 19:18:34 +03:00
margin-right: 0.558vw;
2022-09-15 04:29:56 +03:00
transition: 0.2s ease-in-out;
}
.detail-btn-large:hover .icon-enter-arrow{
display: inline-block;
transform: rotate(-45deg) !important;
}
2022-09-14 19:17:59 +03:00
</style>
2022-09-15 04:29:56 +03:00
<button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>