I want to make a button on pure html and css like this

I made a shadow, but without a clue how to make a contour. I tried to make another link with absolute positioning, which would show up and come up from the button when hovering. But I would like to know the opinion of professionals, is it possible to implement it easier?

    3 answers 3

    Option with swimming out and swimming :)

    .button { position: relative; margin: 50px; width: 200px; height: 50px; border: 1px solid green; color: white; font-weight: 700; text-transform: uppercase; box-sizing: border-box; background: green; } .button::before { position: absolute; top: 0; left: 0; z-index: -1; content: ""; display: block; width: 200px; height: 50px; border: 1px solid green; box-sizing: border-box; transform: translateX(0) translateY(0); transition: transform 0.5s ease-in-out; } .button:hover::before { transform: translateX(-5px) translateY(-5px); transition: transform 0.5s ease-in-out; } .button::after { position: absolute; top: 0; left: 0; z-index: -1; content: ""; display: block; width: 200px; height: 50px; background-color: rgba(51, 100, 2, 0.4); transform: translateX(0) translateY(0); transition: transform 0.5s ease-in-out; } .button:hover::after { transform: translateX(5px) translateY(5px); transition: transform 0.5s ease-in-out; } 
     <button class="button">Кнопка</button>

    • Exactly what is needed. Thank! - GeekBrain

     #test { position: relative; width: 200px; height: 50px; border: 1px solid green; margin: 100px; background: green; } #test::before { content: ""; position: absolute; border: 1px solid green; width: 200px; height: 50px; top: -5px; left: -5px; overflow: hidden; opacity: 0; transition: .5s; } #test:hover::before { opacity: 1; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="D:\test\style\main.css"> <script src="D:\test\js\adaptiveMenu.js" defer></script> </head> <body> <div id="testwrap"> <div id="test"> </div> </div> </body> </html>

    • So he just appears and disappears. Need to swim out and swim back - GeekBrain

    Firstly, all this can be done with a shadow, secondly, they could look at the Academy website itself :)

     body { padding: 20px; background: #ccc; } button { opacity: 1; transition-property: box-shadow; will-change: box-shadow; transition-timing-function: linear; transition-duration: .2s; background-color: #4eb543; border-color: #4eb543; width: 270px; padding: .7em .875em; font-weight: 500; font-size: 22px; color: #fff; text-decoration: none; display: inline-block; font: inherit; border-radius: 0; user-select: none; touch-action: manipulation; position: relative; max-width: 270px; } button:hover { background-color: #4eb543; border-color: #4eb543; box-shadow: 5px 5px rgba(78,181,67,.5); opacity: 1; transition-property: box-shadow; will-change: box-shadow; transition-timing-function: linear; transition-duration: .2s; } button:before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% + 6px); height: calc(100% + 6px); border: 1px solid #4eb543; transform: translate(0,0); opacity: 0; transition-timing-function: linear; transition-duration: .2s; transition-property: transform,opacity; will-change: transform,opacity; } button:hover:before { transform: translate(-8px,-8px); opacity: 1; } 
     <button>Подписаться</button>

    • Thank you very much :) And I tried to look at the site, but something went wrong - GeekBrain
    • One problem - the background on the site is not white, but with a picture - GeekBrain
    • @GeekBrain edited - websnap