結論
divタグで囲う
具体例
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<div class="signup_button">
<%= link_to new_registration_path(resource_name) do %>
<button type="button" class="signup_submit_button"><%= t(".sign_up") %></button>
<% end %>
</div>
<% end %>
.signup_submit_button {
display: inline-block;
width: 180px;
text-align: center;
font-size: 14px;
color: gray;
text-decoration: none;
font-weight: bold;
padding: 8px 24px;
border-radius: 20px;
background-image: linear-gradient(-90deg, #FFFF00, #FFCE0D);
transition: .5s;
background-size: 200%;
border-width: 0px
}
.signup_submit_button:hover {
background-position: right;
}
これだと、マウスオーバーで、テキストの輪郭で背景が黒いのが出てきてかっこ悪い。
そこで、buttonタグをdivで囲うと、、、
<div><button type="button" class="signup_submit_button"><%= t(".sign_up") %></button></div>
黒いのが現れない!!!
コメント