.s_button1:before { content: ""; position: absolute; display: block; transition: all .6s; width: 100%; height: 0; border-radius: 50%; left: 50%; top: 50%; padding-top: 100%; transform: translateX(-50%) translateY(-50%); } .s_button1:hover:before { animation: style1 .75s; z-index: 1; } @keyframes style1 { 0% { background: rgba(0, 0, 0, .25); transform: translateX(-50%) translateY(-50%) scale(0) } to { background: transparent; transform: translateX(-50%) translateY(-50%) scale(1) } } .s_button4::after { opacity: 1; width: 0; } .s_button4:hover::after { width: 100%; background-color: rgba(64, 158, 244, 1); } .s_title { font-size: 16px; color: #333333; line-height: 1; } .s_button1:hover { background-color: rgba(36,190,172,1); color: rgba(255,255,255,1); border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; border-style: solid; border-color: rgba(36,190,172,1); font-size: 14px; } .s_summary { font-size: 24px; color: rgba(255,255,255,1); line-height: 1.5; } .s_button1 { border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; color: rgba(255,255,255,1); border-style: solid; border-color: rgba(36,190,172,1); font-size: 14px; border-width: 0px; position: relative; overflow: hidden; } .s_button5 { background-color: rgba(255, 255, 255, 0); font-size: 14px; color: rgba(64, 158, 255, 1); border-style: solid; border-width:0px; border-color: rgba(64, 158, 255, 1); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; transition: all .3s; }